~Welcome to My Homework Pages~

Intro to Cascading Style Sheets   page 1 of 5 >

Lesson3:
Boxes and Borders
In the last lesson I said that as far as CSS is concerned, every HTML element is considered a box, and as such, a box has certain properties regardless of what element it might actually be.

A CSS box has a width and height, as you would expect, but it also has border, margin and padding properties.

The different parts of the box model are shown in the diagram below.

The width of an element without any padding, border, or margins is represented by the inner rectangle. As soon as you add a border, padding, or margins, then the width and height of the element increases.

You have full control over all parts of the box. You can set a padding, margin, or border on any or all of the sides.

Since we are all used to using tables, think of the padding as the same as cellpadding, border is of course a border, and margin somewhat similar to vspace and hspace attributes for an img tag.

With CSS, you will find yourself using margins and padding, either one or the other, or both together depending on what you are doing. For instance, these pages use a margin-left and margin-right on a content <div> to add space on both sides of this text.

Looking at the box model above you might think that padding and margins do the same thing, add space around the central box, but that is not correct. The padding pushes any borders you have declared away from the central box, and any background you have on the box will expand with the padding, but will not be behind the area occupied by the margins.

To illustrate, here are 4 paragraphs, with a background and border. The first paragraph has no margin or padding, the second paragraph has padding and no margin, the third paragraph has only a margin, while the 4th paragraph has both padding and margin.

Hello, I'm a paragraph sitting on the page to show you some padding and margin differences. I have a border and a background with no padding or margins.

Hello, I'm a paragraph sitting on the page to show you some padding and margin differences. I have a border and a background with no margin but a padding of 10 pixels.

Hello, I'm a paragraph sitting on the page to show you some padding and margin differences. I have a border and a background with no padding but a margin of 10 pixels.

Hello, I'm a paragraph sitting on the page to show you some padding and margin differences. I have a border and a background with padding of 10 pixels and a margin of 10 pixels.

You may notice something with the paragraphs above with no margins - there is no space between them while normal paragraphs on a web page have a gap between them. This is because the browser puts a default top and bottom margin on a <p> element of approximately 1em, equal to one blank line.

Notice something else, the first paragraph with a margin of 10px has a 10px gap between it and the paragraph above that has no margin, but the gap between it and the paragraph below that also has a margin of 10px still only has a 10px gap, not the 20px gap you might expect.

This is a feature of CSS margins, in that the rules specify that adjacent vertical margins collapse to the size of the largest margin, and do not add together. This is why paragraphs have only 1 blank line between them even though they have a default top and bottom margin of 1em, the margins collapse together, leaving only the one space.

A lot to remember. Maybe, but after using margins and padding for a while you will soon become familiar with which to use, and where. It is only by using these features and learning by your mistakes that you will become comfortable with the new world opened up by CSS.

We will now have a look at borders.

page 1 of 5 >

~ Learning Can be Fun ~