The Box Model

margin, padding & border Properties
A block-level element, such as a p paragraph, can be thought of like a box. The box is split up into different parts: the content, the padding, the border and the margin. This
structure is known as the Box Model.

Content – This is the text, images, and everything else contained within the element.
padding – This is the space immediately around the content.
border – This is a line on the boundary of the padding.
margin – This is the space beyond the border, which touches the boxes of adjacent elements.

Each part of the box can be individually styled using CSS.

The 4 Sides Of The Box
The padding, border and margin of a box can be further split up into their 4 sides:
• top
• right
• bottom
• left

We can specify individual CSS properties for each of the 4 sides.

Padding
You can specifiy an amount of padding for each of the 4 sides using any of the standard CSS measurement units, such as px (pixels), em (em widths) and % (percentage ofparent element’s box). You can specify any of the padding CSS properties: padding-top, padding-right, padding-bottom, padding-left.

For example:
p {
padding-top:10%;
padding-right:20%;
padding-bottom:15%;
padding-left:25%;
}

The above code will make the p element’s box have padding of differing thicknesses at its top, right, bottom and left sides.

Writing Values For Padding In Shorthand
The previous example code can be simplified by writing a shorthand version that combines each of the 4 sides in a single property, called padding:

p { padding:10% 20% 15% 25%; }

The 4 values of the padding property run in the following order: top, right, bottom, left.

If you find this sequence difficult to remember, just think of the sides of the box in terms of the directions of a compass or a map: North, East, South, West (“Never Eat Shredded Wheat”). The previous code example and the example before it will have an identical effect on the padding of the element. However, we can use the shorthand approach to simplify our code.

There are some more, even shorter, ways of writing values for padding:
When only 3 values are given, the values are interpreted in the following order: top, left & right, bottom.
The following example will make the top padding 10%, the left and right padding 15%

and the bottom padding 25%:

p { padding:10% 15% 25%; }

When 2 values are given, the values are interpreted in the following order: top & bottom, left & right.

The following example will make the top and bottom padding 10%, and the left and right padding 15%:

p { padding:10% 15%; }

If just 1 value is given, the value is used for all four sides of the box. The following example will make the padding of each side 15%:

p { padding:15%; }

Margin
The box’s margin works in a similar way to its padding. The following examples are different ways to specify padding for an element, such as the p element:
p {
/* We can specifically give values to any of the four sides: */
margin-top:1em;
margin-right:2em;
margin-bottom:1.5em;
margin-left:2.5em;
/* We can write any of the four types of shorthand: */
margin:1em 2em 1.5em 2.5em;
margin:1em 1.5em 2.5em;
margin:1em 1.5em;
margin:1.5em;
}

Border
We can specify values for the border’s width, style and colour as follows:

element { border: width style color; }

The following example will give the p element a solid red border with a width of 1 pixel:

p { border:1px solid red; }

The border property will style each of the top, right, bottom and left borders of the element to the given values. The border-width can be specified using any of the standard CSS measurement units, such as px (pixels), em (em widths) and % (percentage of parent element’s box). The border-style affects the way that the border is drawn on the page. It can have any of the following values: double, solid, dashed, dotted, ridge, outset, groove, inset. Most browsers will display borders with a solid border-style by default. The border-color is a 6-digit hexadecimal colour code, as used elsewhere in CSS. The above code is shorthand. To achieve the same effect, we could have individually specified the 4 sides of the border as follows:

p {
border-top:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
border-left:1px solid red;
}

For further refinements, we can specify each of the values for each of the sides. For example:

p {
border-top-width:1px;
border-top-style:solid;
border-top-color:red;
border-right-width:1px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:1px;
border-left-style:solid;
border-left-color:red;
}

width & height
We can set the width of an element’s content with the width property. For example:

p { width:75%; }
hr { width:8em; }
img { width:256px; }

We may want to specify the widths of our elements so that they fit together well on the page. However, we will not often need to specify a height because the height of a box is usually determined by the quantity and size of text or other content within it. We can specify height in the same way as width. For example:

hr { height:3px; }
img { height:360px; }

width & height Of The Content & Of The Entire Box
Note that width and height refer to the content of the box and not the entire box itself. So, in the following example, the width of the box’s content will be 50% and the overall width of the box will be 62%:

p {
width:50%;
margin:5%;
padding:5%;
border:1%;
}

The overall width of the box can be calculated as:
content width + padding-left + padding-right + margin-left + marginright+ border-left + border-right
For the example above, this calculation becomes:
50% + 5% + 5% + 5% + 5% + 1% + 1% = 62%

Similarly, the overall height of a box can be calculated by considering the padding, margin, border and content height within the box.

How margin, padding & border Affect The Width & Height.
We often don’t need to specify a width or height value, since the margin, padding and border properties can be enough on their own. For example, the following code will style a p elements box to have a content width of 50%, even though we have not given a specific value to the width property:

p {
margin:25%;
padding:0;
}

In the above example, the margin-left will be 25% and the margin-right will be 25%. We have specified that there will be zero padding. Since the default way for a browser to display a p element is without a border, there will also be zero border. The entire box will stretch to 100% of its parent element’s content width, and so the content width of the p element will be 100% – 25% – 25% = 50%.

In this way, we keep things simple by only specifying the smallest amount of properties to achieve the effect we desire. We let the browser work out how to display our elements based on the CSS properties that we specify.

The Box Model Hack
As we have learned, the CSS Box Model uses width and height to specify the dimensions of the box’s content, not the entire box. One problem we face when styling our web pages that a very common browser – Microsoft’s Internet Explorer 5 series – misinterprets the Box Model and uses its own, non-standard box model.
The Microsoft box model interprets the width and height values as being the width and height of the entire box, and not the width of the box’s content. This simple, but fundamental difference makes a real mess of any styles that specify width or height along with margin, padding or border. Fortunately, there is a workaround – a code “hack” that forces Internet Explorer to behave properly. For information on this “Box Model Hack”, see:
http://www.tantek.com/CSS/Examples/boxmodelhack.html