Margin Collapse
User Agent Style Sheet Margins
- K11a - (time: 2:28)
- Most block level elements have margins set, either explicitly in the author's css or in the user agent (browser's) style sheet that provide a gap above and below them.
- Paragraph, heading, ul, ol, and some other block level tags have these top and bottom margins built-in.
- For example:
- Paragraph tags have 1em of margin top and bottom.
- Heading tags have varying amounts of top and bottom margin.
- For example:
- Check these links for examples in different user agent style sheets:
- Paragraph, heading, ul, ol, and some other block level tags have these top and bottom margins built-in.
- Most block level elements have margins set, either explicitly in the author's css or in the user agent (browser's) style sheet that provide a gap above and below them.
Margin Collapse Defined
- K11b - (time: 6:17)
- Block level elements stack on top of each other because each of them occupy their horizontal space due to their built-in before-and-after line breaks.
- Whenever top and/or bottom margins meet, their sizes will be compared, and the larger margin will be used.
- This phenomenon is called margin collapse
- It is intentionally a part of css.
- It is intended to prevent excess space between vertically adjacent block elements.
- Examples of such vertically adjacent block elements:
- Paragraph elements that are one after the other in the code.
- A header element such as h1 followed by another header element such as h2.
- Margin collapse will prevent the margins of these elements from being added so that there is not an excess amount of space between them.
- For example, you would not want the default paragraph margin of 1em to be added to the margin of another paragraph or heading tag when they come into contact.
- The <div> element:
- div is a block element that has default margins of zero.
- The div element is also able to contain other block elements.
- When a div contains an element such as a paragraph element, with its default top and/or bottom margin, and that paragraph element is the first, last, or only element in the div, the margin of the paragraph is said to come into contact with the margin of the div that contains it and the greater one wins - meaning the paragraph element's margin will win and not the div's.
- Margin collapse will cause the paragraph's wider margin to come out of (escape) the div.
Preventing margin collapse
- K11c - (time: 1:27)
- To prevent the escaping of the margin of the nested element, you have two options:
- Set the top margin of the first element or the bottom margin of last element in the div to 0.
- The top margin would be set to zero if the preceding element is affected.
- The bottom margin would be set to zero if the subsequent element is affected.
- ...or, add 1 pixel of padding or a border to the top and/or bottom of the div tag to prevent the margin of the nested paragraph from coming into contact with the margin of the div tag.
- Set the top margin of the first element or the bottom margin of last element in the div to 0.
- For example:
div { padding-bottom: 1px; }
- This is done to stop margin collapse.
- IMPORTANT additional information:
- Floated element margins never collapse.
- Margin collapse only affects top and bottom margins, never side margins.
- Padding and borders do not collapse.
- Example