css 101

If you ever learned the cellpadding or cellspacing attributes for HTML tables, you'll find working with margins and padding similar in CSS. Margins refer to the area around, or outside of an element. Padding, in contrast, refers to the area between the edges of a box and what lives inside that box. An easy way to remember which is which is to think of sending a breakable object through the mail - you fill the empty space in the box with foam peanuts to protect the item. Those foam peanuts are your padding. The margin would then be the space between your box and the next box in the truck. Just remember: Padding is inside the box, margins are outside the box.

In CSS, you'll generally use padding to give an element some breathing room within the space it's in, as we did with the last example in the Backgrounds section. You'll typically use margins to cause a box or element to be offset from adjacent elements. The syntax for working with padding and margins is very similar.

Padding and margins may just seem decorative right now, but they'll become critical when we start getting into CSS page layout, so make sure you understand them.

The contents of this box are offset from the edge of the box by 15px. Border added for illustration. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

As with borders, padding can be controlled for the whole box, as above, or per-side:

The contents of this box are offset from its edges by different amounts. Border added for illustration. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

But that's pretty verbose. When setting padding values separately for different sides of a box, you can use this shorthand, which achieves exactly the same result as the previous example:

When using the shorthand syntax, specify all four values, separated by spaces, in a clockwise circle starting from the top (top, right, bottom, left). If you specify only two values rather than four, the first value will apply to the top and bottom, and the second value will apply to left and right:

The contents of this box are offset from its edges by one value for the top and bottom, another value for left and right. Border added for illustration. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure

Margins

To illustrate margins, we really need to talk about how one element (box) relates to another. For our purposes, we'll be putting a sample paragraph inside of an element called a "div," which we haven't covered yet. For now, suffice to say that a div is an arbitrary box used to contain other things. We'll put a border on the div so you can see it, then put a paragraph with its own border inside that div, so you can see what the margin attributes do to it.

The blue space above represents the paragraph, while the green space represents the margin between that paragraph and it's containing box. As with padding, we can control margin depths per-side, rather than globally.

In the second example, we've used syntax very similar to the shorthand we used earlier for padding, but to create different size margins on each side of our paragraph box. Again, these concepts will become critical when you get into CSS page layout techniques.

More on margins
More on padding