Part of the CSS Box Model Reading List

On a webpage, every element is treated as a box. The body element is a box, with other element boxes inside it. Paragraphs, headings and links are all boxes.

By default, elements on a web page respect each other’s space, and don’t overlap. As the content of an element grows, it “pushes around” other element boxes on the page to make room for itself. Understanding this behaviour is a vital part of controlling the design and layout of your page.

Packing Up Boxes

Perhaps the easiest way to understand the box model is with a thought exercise:

Imagine you are moving out of your home. Most items in the back of a moving truck will be stored in boxes. Particularly precious or fragile items will be swathed in bubble wrap or newspapers, adding padding inside the box. Boxes with delicate items inside are usually given more space around them in the bed of the truck: that‘s margin.

Padding

In CSS, most elements can have padding applied to them. Just as in moving boxes, this padding is often applied equally to all sides of the element‘s content: 

main { padding: 3rem; }

As with real padding, this pushes the content further inside the box.

padding also be applied to each side of an element (left, right, top and bottom) separately: 

main { 
    padding-top: 20px;
    padding-right: 3rem;
    padding-bottom: 2cm;
    padding-left: 20%;
 }

Shortcuts

You can also add padding to each side of an element‘s conent using a CSS shortcut, following the same order as above: top, right, bottom and left. Using the same measurements as before, we could write:

main { 
    padding: 20px 3rem 2cm 20%;
 }

If the left and right values for padding in an element are the same as each other, and the top and bottom are the same as each other, you can use another shortcut:

main {
    padding: 2rem 4rem;
}

This will apply padding of 2rem to the top and 2rem to the bottom of the main element, as well as 4rem to the left and right. You’ll tend to find this shortcut more frequently used in a special way on elements with margin (see below).

Finally, there's a three-value shortcut that specifies the top, left and right, and bottom padding in one line:

main {
    padding: 2rem 30% 4rem;
}

Sizing boxes

As you add more and more bubblewrap around an item on moving day, you’ll need a larger box to contain it. A browser takes the same approach, at least by default: as you add padding, the box for an element gets larger and larger. This can make anticipating layout changes difficult. Alternatively, you can add the following at the start of your stylesheet:

* {
    box-sizing: border-box;
}

You can find more details on this important property in a separate article.

Margin

padding is on the inside of a box, margin is on the outside. For example, margin-top pushes an element away from other elements above it, or whatever it is contained within.

margin can use the same array of values and shortcuts as padding.

One particular use of margin is a little different from padding. You’ll often find this used on main elements, or “wrapper” div elements:

#wrapper {
    width: 40rem;
    margin: 0 auto;
}

While it is the same two-value shortcut as before, the use of auto means “make the margin of this element 0 on the top and bottom, and automatically balanced on the left and right. That is, the left and right margins will always be the same as each other, placing the element in the middle of its container horizontally.

Built-Ins

Many elements have a default margin or padding automatically inherited from the user-agent stylesheet. In most cases, these values work in your favour: paragraphs have space between them due to the fact that they have default margin-top values, for example. Depending on your design, these default values may sometimes work against you: figure elements have a default left and right margin in most browsers, which designers don't always anticipate when writing CSS. You can always override these values by using your own custom declarations for the elements, overriding the property‘s default values.

Border

The border of an element is the visible edge of its box. Very frequently it will be referenced in your CSS as a shortcut affecting all sides in the same way: 

p { 
    border: 1px solid red;
}

There‘s much more you can do with border: borders can be oval or circular, or even have images applied to their edges. I‘ve written a complete reading list detailing all of the option for border.

Outline

The subtlest visual property of the box model, outline is primarily a feature for accessibility: it highlights the currently selected element. Options to change the outline are limited to its color, style and width. Due to it‘s accessibility features, outline should usually be left alone in your stylesheet; any alterations made to it should be very carefully considered.

Going Negative

Earlier I said that elements on a web page are usually well-behaved: they may jostle for position, but they always make room for each other. That’s true as long as we are talking about positive values for margin or padding. However, using negative values reverses this relationship: while positive margin values pushes things further apart, negative values pull elements closer together, and can even cause them to overlap. A sufficiently large negative margin value can even pull and out of the visible browser window.

Width & Height

Block-level text elements are automatically 100% of the width of their container, and create their own box-height from a combination of padding, font-size, and line-height. Bitmap-based elements, such as video and images, are their native width and height by default.

It‘s also possible to specify width and height for block-level elements. I discuss this in further detail in other articles.

Exceptions

Not every element can take every option for margin and padding. Inline elements can’t have margin applied to them, and padding only works on their left and right. This can always be changed by altering the display property for the element in your stylesheet.

Conclusion

Padding and margin are often confused by newcomers, since – without a visible border or some other indication – their visual effect can appear very similar. The important thing to remember is that padding is always applied on the inside of an element, and margin on the outside.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.