CSS Positioning - the box model

In this section, you'll learn how to lay out your web pages using CSS positioning. Before doing so, however, it helps to learn about something called the CSS Box Model.

The CSS Box Model

An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some padding, and finally the content itself:

The margin is transparent and goes around the border. You can't set a colour for margins. It can be big, as in the image above, or set to zero and snuggle right up against the border.

The border goes around the padding and the content. It can take a colour, a size, and a border type (dotted, solid, etc).

The padding is the space between the content and the border. It takes the same colour as the background for the entire box.

The content is things like text and images - the whole point of the box.

All four areas can have their sizes set. In the code below, we've set up two paragraphs of text:

All we're doing is setting a height and width for two paragraphs of text. We're then setting the margin, the border, and the padding. (We've also added a colour so you can see what it looks like in the browser.) Here's the result:

Notice the size of the margins surrounding the border. The first margin is 30 pixels on all four sides. You can set individual sides, if you want:

margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

By just using margin, though, you're setting the margin for all four sides. The same is true for border and padding: you can set all four at once, or just set individual values by adding top, right, bottom, or left.
To get the total size of the box, you add up all four parts: margin, border, padding, content. For example, in the code above we have a width of 300 pixels for the first paragraph (the width refers to the content area). The margin is 30 pixels on each side, giving a total margin width of 60 pixels. The border is 1 pixel on the left and 1 pixel on the right. The padding is 20 pixels on the left and 20 pixels on the right. The total width of the entire box is therefore:

Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300

Total box width = 402 pixels

So although we specified a width value of 300 pixels, the width of the box around the entire paragraph was actually 402 pixels. You need to bear this in mind when setting values like this, especially when you float elements left and right. For example, if you have a navigation area floated left then it's a good idea to set the width value, and all of the others values: just remember to add up all the different sizes when calculating the overall size.

In the next lesson, you'll learn how to a add comments to your CSS code.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 6 (CSS Layouts)