Trying out new ways to style margins and padding


by Jeremy Caudle
code

I learned about a few CSS logical properties thanks to this article, written by David Bushell. I learned about the margin-block, margin-inline, and padding-block properties today and tried putting them to use in this silly post.

Barnie's Bacon Bits

Spicy jalapeno bacon ipsum dolor amet in reprehenderit shoulder ullamco, ut dolor eu biltong. Jowl porchetta laboris adipisicing, ea ut ex in sunt. Pork loin culpa spare ribs non consequat jowl turkey, ham labore jerky cupidatat. Andouille chuck tongue, commodo shank bacon fugiat salami fatback pork chop. Excepteur doner esse short loin fugiat deserunt cillum do dolore leberkas ball tip picanha. Hamburger ullamco meatloaf beef ribs.

Meaty Pizza Toppings

  • Bacon
  • Sausage
  • Canadian Bacon
  • What about
  • jalapenos
  • pineapple
  • more cheese?

We don't include those since they are not meat.

View the code:

HTML and JS 
<div class="code-block" id="post-code-block">
            <h2>Barnie's Bacon Bits</h2>
            <p>Spicy jalapeno bacon ipsum dolor amet in reprehenderit shoulder ullamco, ut dolor eu biltong. Jowl porchetta laboris adipisicing, ea ut ex in sunt. Pork loin culpa spare ribs non consequat jowl turkey, ham labore jerky cupidatat. Andouille chuck tongue, commodo shank bacon fugiat salami fatback pork chop. Excepteur doner esse short loin fugiat deserunt cillum do dolore leberkas ball tip picanha. Hamburger ullamco meatloaf beef ribs.</p>
            <h2>Meaty Pizza Toppings</h2>
            <ul>
                <li>Bacon</li>
                <li>Sausage</li>
                <li>Canadian Bacon</li>
            </ul>
            <ul class="inline-list">
                <li>What about</li><li>jalapenos</li><li>pineapple</li><li>more cheese?</li>
            </ul>
            <p>We <strong>don't</strong> include those since they are not meat.</p>
            <button id="button-writing-mode">Switch Writing Direction</button>
        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
            const writingModeSwitch = document.getElementById('button-writing-mode');
            const codeBlock = document.getElementById('post-code-block');

            // ---------        
            // Events
            // ---------
            
            writingModeSwitch.addEventListener('click', () => {
                if(codeBlock.style.direction === "rtl") {
                    codeBlock.style.direction = "ltr";
            } else {
                codeBlock.style.direction = "rtl";
            }
            });

        
        </script>
CSS 
.code-block {
                margin: 1rem auto;
                padding: 1rem;
                background-image: linear-gradient(rgba(255, 166, 0, 0.332), rgba(255, 68, 0, 0.322));
                border: solid orangered 5px;
                border-radius: 1rem;
                max-width: 20em;
                font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                direction: ltr;
            }

            .code-block h2, .code-block p, .code-block ul {
                margin: 0 0 1rem 0;
            }

            .code-block ul li::marker {
                color: rgb(201, 8, 8);
            }

            .code-block ul.inline-list {
                margin: auto 0 auto 1ch;
                padding-left: 0;
            }

            .code-block ul.inline-list li {
                display: inline;
                margin: auto 1em auto 0;
            }

            .code-block ul.inline-list li:not(:first-child):not(:last-child)::after {
                display: inline;
                content: ", ";
                margin: 0;
            }

            .code-block button {
                display: block;
                width: 30ch;
                margin: 1rem auto;
                min-height: 44px;
            }

            @supports (margin-inline-start:inherit) {
                .code-block ul.inline-list {
                margin: auto;
                margin-inline-start: 0;
                margin-inline-end: .5ch;
                margin-block-end: 1rem;
                padding-inline: 0;
                }
                .code-block ul.inline-list li {
                margin-inline-end: .5ch;
                margin-inline-start: 0;
                }

                .code-block ul.inline-list li::after{
                    margin: auto;
                    margin-inline-end: .5ch;
                }
            }

            @supports (margin-block-start:inherit) {

            .code-block h2, .code-block p, .code-block ul {
                margin: auto;
                margin-block-start: 0;
                margin-block-end: 1rem;
            }

            .code-block button {
                display: block;
                margin: initial;
                margin-block: 1rem;
                margin-inline: auto;
            }

            }

Tags