Cascading Style Sheets/CSS Box Model

From WikiKnowledge

With Cascading Style Sheets everything is contained inside a box which is usually invisible. There are four parts to these boxes:

1. The content of the box, for example text or an image.
2. Padding which surrounds the content.
3. The border.
4. The margin, which is always transparent.

Contents 1 Width and height 2 Margins 2.1 Margin Collapsing 3 Padding 4 Navigation 4.1 Cascading Style Sheets

[edit] Width and height

The width and height of a box in CSS is the content area only. This does not include the margins, borders or padding which make the box bigger. Note that many web browsers have got this simple idea completely wrong. In Internet Explorer 5 the width of the box includes the padding and borders. Internet Explorer 6 also has this problem by default, however it can be fixed by including a Document Type Decoration in the HTML document.

You can see the effect in the picture on the right. Both the green and the yellow boxes are 200 pixels wide. However the yellow box looks wider because it has 40 pixels of padding on the left and another 40 on the right. This makes the box look like it is 280 pixels wide (200 + 40 + 40 = 280).

[edit] Margins

The margins of a box are used to keep other boxes away from the box. They are always transparent so you never see them. Here we have three boxes floated left. Boxes one and two have no margin so they line up next to each other. Box three however has been given a margin on its left side of five pixels. The margin is invisible, however it pushes box three away from the other two.

The margin property has four versions, one for each side of the box.

• margin-top
• margin-right
• margin-bottom
• margin-left

You can also use the shorter version: margin: <margin-top> <margin-right> <margin-bottom> <margin-left>

Here is an example of how you would use the four margin properties:

p {
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 2px;
}

This rule is the same as above except it uses the shorter margin property.

p {
    margin:0px 10px 5px 2px;
}

[edit] Margin Collapsing

When two vertical margins come in contact with each other they collapse. So when two paragraphs with a margin of 20 pixels line up one above the other the margins collapse so that there are only 20 pixels of space between them and not 40 pixels. Note that this doesn’t happen with left and right margins, only top and bottom margins.

The image on the right shows the margins of two boxes in light blue (normally a margin would be transparent). On the left side of the image the bottom margin from the top box joins withe the top margin from the bottom box. This is the margins collapsing. The right side of the image shows what would have happened in the margins did not collapse.

Note that there is no way to control margin collapsing.

[edit] Padding

Padding is used to keep the content of a box away from the edges or from its border. The padding of a box is the same color as the background color of the box. Below you can see two boxes with some text in each. The first box has got no padding set, so the text lines up right to the edge of the box. The second box has got ten pixels of padding on all four sides, which pushes the text away from the edge of the box, and makes tho box bigger.

Some examples of the padding property. The padding is places on all four sides.

padding: 2em;
padding: 20px;
padding: 5%;

You can set different amounts of padding on all four sides of a box by using these properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

[edit] Navigation