CSS Box Model

To understand the CSS box model you must understand that every object (element) displayed on a web page is considered to be a rectangular box which has a content area surrounded by padding, a border and margins.  The padding resides inside the border and sits next to the content.  The margin is outside of the border.  The following images better describe the differences between padding, border, and margin.

Padding

Padding is the space between the content and the content’s border.

padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

is the same as

padding: 10px;

For example:

This is text with padding of 10 pixels and a border has been added to help you see it. Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… 

Note: You may see more padding on the right because of text wrapping. Just know there is really 10px padding set up all around the text.

You can also set up different padding sizes, or no padding all on some sides.

padding-top: 10px;
padding-right: 50px;
padding-bottom: 0px;
padding-left: 6px;

is the same as

padding: 10px 50px 0px 6px;

For example:

This is text with padding of various sizes and a border has been added to help you see it. Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text…

Border

Border is the line that is drawn around each edge of the content’s box; however, if padding is added the padding will be between the content and the border.

You can set rules for individual borders.  Just like the padding rules, there are individual rules for each side of the box.

border-top: 4px solid #495405;
border-right: 2px solid #677C81;
border-bottom: 3px solid #82272C;
border-left: 4px dashed #677C81;

You can also use a shorthand for border properties. This is used when all border sides are the same. The syntax is width, style, color.

border: 1px solid #677C81;

By using CSS shorthand, it is much easier to hand code CSS.

I have created a blog that demonstrates the different border styles. However, you must be aware that the appearance of borders can differ from browser to browser.

Background Color

Background-color fills the space inside the border and behind the padding area.

background-color: #495405;

Margin

Margin is what separates the content tag from another tag. For example, margin allows for spacing between a floating image and surrounding text. It is also the space found at the top and bottom of headings and paragraphs.

I use margins for positioning and giving breathing room to elements.  You set left and right margins to “auto” to center an element.

margin: 4px auto;

The following is an example of left margin:

p.leftMargin {
     margin-left: 15px;
}

Here is a paragraph with a margin of 15 pixels. Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text… Lorem ipsum text…