Borders, Padding and Margins

Margins

Margins define how much space there is between a box and other elements in the normal flow of the document.

Like other parts of the box model, margins are not inherited.

The syntax of the margin property is nearly identical to that of the padding property.

Unlike borders and padding which have a default value of 0, most block-level elements do have default vertical margins that are greater than 0.

We can see this effect when looking at headings, paragraphs and lists ... there is some space between each of the elements ... each element has a default vertical margin, thus the vertical space between each element... well, if it is not 0, then there is some space between each of the elements.

Normally the default margins for the top and bottom include some extra space. The margin for left and right is typically 0.

Here is an example:

This is an H3 heading

This is a paragraph. Notice there is some default space between this element and the H3 element above. But there is no space at the left or right of the block-level elements.

This is the second paragraph and it has space between each of the two paragraphs. Every block-level element has its own default top and bottom margins (Lists, for instance, also have default horizontal padding or margins). The margin for a heading MAY be larger than a paragraph.

Except where noted in the examples below, all block elements in every lecture page have zero horizontal margins. The space you see between the text and the gray margin area on either side of the page is the padding for the "content" DIV of the lecture pages. I left the padding in the content DIV to maintain readability of the lecture.

DIV elements (a generic type of container block) have no default margins ... or more precisely, a DIV element has default margins with a value of 0.

The 'built-in' HTML block-level elements typically do have default margins while the generic block-level DIV element does not! In this case I would probably want to specify a top or bottom margin (or both) for the DIV.

DIV elements typically have an ID or class associated with them, and they are normally a containing block for some 'special' content which gets particular styles specific to that DIV. Margins and padding would normally be set for most DIV elements. It's also possible that positioning for a DIV would also be set (this is yet another powerful feature of CSS layout).

.divWithMargin {
   border: 1px solid #333;
   width:   660px;
   margin:  30px auto 30px auto;
   padding: 15px;
   }

Negative Margins

As I mentioned, margins distinguish themselves from padding by accepting negative values. Negative values will have two effects:

• The position of the corresponding edge of the content area is shifted the specified distance toward the margin-side that has the negative value specified. For horizontal margins, this effectively increases the width of the content area if the element box does not have a fixed width specified for it.
• The margin is set as if the specified value was a positive value.

Let's look at how a negative margin affects the element box.

This paragraph has the default margin settings.

This paragraph specifies a 30px left margin.

This paragraph specifies a -30px left margin. The effect is to add a left margin of 30px, plus shift the left edge of the paragraph's content area 30px toward the left edge of the document. This also effectively increases the width of the content area. Notice that the right margin has not changed position.

This paragraph has the default margin settings.

This paragraph has the default margin settings, with a fixed width of 600 pixels.

This paragraph specifies a -30px left margin. The effect is to add a left margin of 30px, plus shift the left edge of the paragraph's content area 30px toward the left edge of the document. Since this paragraph has a 600 pixel width explicitly declared, the width of the content area does not change. Notice that the position of the right edge of the content area shifts to compensate.

This paragraph has the default margin settings.

This paragraph specifies a 30px right margin.

This paragraph specifies a -30px right margin. The effect is to add a right margin of 30px, plus shift the right edge of the paragraph's content area 30px toward the right edge of the document. This also effectively increases the width of the content area. Notice that the left margin has not changed position.

This paragraph has the default margin settings.

This paragraph specifies a 1em top margin.

This paragraph has the default margin settings.

This paragraph specifies a -1em top margin. The effect is to set a top margin of 1em, plus shift the outer edge of the element's margin 1em toward the paragraph above it.

This paragraph has the default margin settings.

This paragraph specifies a 1em bottom margin.

This paragraph has the default margin settings.

This paragraph specifies a -1em bottom margin. The effect is to set a bottom margin of 1em, plus shift the outer edge of the element's margin 1em toward the paragraph below it.

This paragraph has the default margin settings.

Collapsing Margins

Collapsing margins describe the interaction between the adjacent vertical margins of block elements which follow one another in the normal flow of the document. Unlike horizontal (right and left) margins, vertical (top and bottom) margins overlap. For an good example of this behavior, read 'Collapsing Margins' on page 108 of the your Stylin' book.

The two primary aspects of collapsing margins are:

Modified - Thursday, April 5, 2007