Box Model and Aside

Learn about the CSS Box Model. As a Bonus, Near the Bottom we learn about the aside Tag.

by Charlie Calvert

Box Model Basics

The box model allows you to space around the content of the elements you create. A button, for instance, has a label that makes up its content. For instance, there are many buttons with their content set to Ok or Cancel. Below you see a button with its content set to the string A Button with Padding.

CSS Box Model Diagram
Caption: The CSS Box Model by Charlie Calvert from the wikimedia commons

Many buttons also have a border. We can add space between the content and the border. This space is called padding.

Other buttons add some empty space outside the border to help separate them from surrounding content. This space is called a margin

Buttons can have padding but no margin, a margin but no padding, no padding or margin, or both a margin and padding.

You can add padding and margins on all four sides, or on only specific sides. For instance, you can add padding on the left and top, but not on the right.


    .btn-left-pad {
            padding-left: 25px;                   
    }

    .btn-right-pad {
        padding-right: 25px;
    }

    .btn-top-bottom-pad {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .btn-padding-verbose {
        padding-left: 25px;
        padding-right: 25px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .btn-padding-concise {
        padding: 25px;
    }
            

The fourth and fifth options yield the same results.

Button with Padding


    .btn-padding {
        padding: 25px;
        border: 10px green double;    
        border-radius: 22px;
    }

    .btn-padding:hover {
        background-color: aqua;
        border-color: white;
    }                   
            

Button with Margin

Button with Margin and Padding


    .btn-margin-padding:active {
        color: red;
    }                    
            

Asides

Near the top of this document is an asidecoded like this:


    <aside>Margins can provide separation between 
    HTML elements.</aside>
            

The aside tag is an HTML5 semantic element. The User Agent (browser) defines it like this:


    section {
        display: block;
    }
            

It's just a simple block element with no other properties. In other words, it exists to help screen readers and internet spiders discover the structure of your document. It is provides meaning, but has little significant impact on the appearance of your site.

We are neither screen readers nor spiders, so most of us want some visual clue to help us understand that a chunk of text is meant as an aside, as a miniature side-bar that illuminates or provides additional meaning to the text. To provide that clue, we include a bit of CSS that floats the element to the right and gussies it up a bit:


    aside {        
        background-color: bisque;
        border: black 1px solid;
        border-radius: 8px;
        float: right;
        font-style: italic;
        margin-right: 5px;
        padding: 8px;
        width: 33%;        
    }
                    
            

NOTE:Even though the letter A comes before B, and though we try to alphabetize the CSS definitions in our files, the convention is usually to declare your CSS body rules first, since most of the other components inherit from the body


    body { ... }
    aside { ... }
    The rest of your CSS rules in alphabetical order...    
            

NOTE:Though it is not essential, I moved all my btn-padding and btn-margin rules into a separate CSS document called /styles/elf-buttons.css. You don't have to use that particular name, but you might conside doing something similar so as to keep them from cluttering up your main stylesheet.

Turn it in

To complete the assignent, style the buttons in your ListButtons page with some combination of margins and padding. Include the hover and active pseudo class. Create at least one button with a margin, and wrap that button in a div that has a CSS rule attached to it. Use a custom HTML class attribute called elf-border when linking your CSS rule to the element.


    <div class="elf-div-border"> ... </div>
            

Set the display property for the rule to inline-block and give it a border property that is 1px wide, has a color of black, and the style set to solid. Use the border shorthand to declare the border:


    .elf-div-border {
        ... define the display and border properties here.
    }
            

Remember, the border shorthand looks something like this:


    foo {
        border: XX YY ZZ;
    }
            

You need to provide the correct valus for XX, YY, and ZZ.

On the same page, insert some blocks of text if they do not already exist. Add an aside. It might look something like this, only prettier:

Box Model Assignment in Action

When you are done, push your work. When you turn in the assignment, provide a link to your GitHub repository and to your ListButton page live on the GitHub Pages site.