How Are Vertical Margins between Two Block Elements Collapsed

Q

How Are Vertical Margins between Two Block Elements Collapsed? - CSS Tutorials - Understanding Multiple Element Formatting Rules

✍: FYIcenter.com

A

The margins between two block elements will be collapsed into one margin. The taller margin stays. And the shorter margin disappears. The tutorial HTML and CSS document below shows a good example:

<html><head>
<style type="text/css">
  DIV.page {width: 425px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#hi {width: 250px; background-color: #ddddff;
    margin-top: 30px;
    border-top-width: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom-width: 30px;
    margin-bottom: 30px;
    border-color: #ddffdd;
    border-style: solid}
  P#low {width: 250px; background-color: #ddddff;
    margin-top: 15px;
    border-top-width: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom-width: 15px;
    margin-bottom: 15px;
    border-color: #ddffdd;
    border-style: solid}
  TD.legend {height: 29px; background-color: #ffffff}
  TD.legend#content {height: 80px}
</style>
</head><body><div class="page">
<h3>Example of Vertical Margins Collapsed</h3> 
<table id=out cellpadding=0 cellspacing=0><tr>
<td id=box><p id=hi><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p>
<p id=low><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p></td>
<td valign=top><table>
<tr><td class=legend>- margin-top</td></tr>
<tr><td class=legend>- border-top-width</td></tr>
<tr><td class=legend>- padding-top</td></tr>
<tr><td class=legend id=content>- Content box</td></tr>
<tr><td class=legend>- padding-bottom-width</td></tr>
<tr><td class=legend>- boder-bottom</td></tr>
<tr><td class=legend>- margin-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>

Save this document as TwoBlockMargins.html, and view it with a browser, you will see the top margin of the lower block collapsed into the bottom margin of the upper block:
Margins Collapsed between Two Blocks

2007-05-11, 7108👍, 0💬

How Are Vertical Margins between Two Block Elements Collapsed
How Are Vertical Margins between Two Block Elements Collapsed? - CSS Tutorials - Understanding Multiple Element Formatting Rules The margins between two block elements will be collapsed into one margin. The taller margin stays. And the shorter margin disappears. The tutorial HTML and CSS document be... 2007-05-11, 7109👍, 0💬

How Are the Parent Padding Spaces Collapsed with the Child Margins
How Are the Parent Padding Spaces Collapsed with the Child Margins? - CSS Tutorials - Understanding Multiple Element Formatting Rules If child block element is enclosed in a parent block element, the vertical margins of the child element could be collapsed with the padding spaces of the parent eleme... 2007-05-11, 6242👍, 0💬

How Floating Elements Are Formatted
How Floating Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules A floating element is a block element or in-line element being specified with the "float" style property. If "float: left" is specified, a floating element will be formatted at the left margin of t... 2007-05-11, 5596👍, 0💬

How Two Block Elements Are Formatted as a Stack
How Two Block Elements Are Formatted as a Stack? - CSS Tutorials - Understanding Multiple Element Formatting Rules If two block elements are coded next to each other, they will be formatted as a vertical stack of two boxes. The HTML and CSS document below shows you a stack of two block elements: &am... 2007-05-11, 5561👍, 0💬

How To Test Child Full Width Extension
How To Test Child Full Width Extension? - CSS Tutorials - Understanding Multiple Element Formatting Rules One of the horizontal formatting rules says: if the width of the parent element is specified and greater than the full width of the child stack. the full width of the child stack will be extende... 2007-05-11, 5484👍, 0💬

How Nested Block Elements Are Formatted
How Nested Block Elements Are Formatted? - CSS Tutorials - Understanding Multiple Element Formatting Rules If a block element is nested in another block element, the inner block, child block, will be formatted as the content box of the outer block, parent block. The HTML and CSS document below shows... 2007-05-11, 5377👍, 0💬

How In-line Elements Are Formatted Side by Side
How In-line Elements Are Formatted Side by Side? - CSS Tutorials - Understanding Multiple Element Formatting Rules If in-line elements are coded next to each other, they will be formatted side by side in a line box. Their individual widths and heights will be respected. Their relative vertical posit... 2007-05-11, 5294👍, 0💬

How Is the Full Width of a Block Element Extended
How Is the Full Width of a Block Element Extended? - CSS Tutorials - Understanding Multiple Element Formatting Rules If the full width of a block element needs to be extended to meet the width of the parent element, brower will following there rules: The full width of a block element is the sum of l... 2007-05-11, 5117👍, 0💬

Why Is the Top Margin Not Showing
Why Is the Top Margin Not Showing? - CSS Tutorials - Understanding Multiple Element Formatting Rules If you are expecting a top margin to show up, and it is not showing up, it's probably because of the vertical margins collapsed due the following rules: Between two block elements - The bottom margin... 2007-05-11, 5025👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.