The style declarations contained within this page:
p {border: 1px dotted gray;}
.cl1 {margin-top: auto; margin-bottom: auto;}
.cl2 {margin-top: 10px; margin-bottom: 10px;}
.cl3 {height: auto;}
.cl4 {height: 25px; overflow: hidden;}
hr {clear: right;}
div {float: right; width: 25%; background: #FDA;}
[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'.
[cl1] This paragraph should have no top or bottom margins, since the 'auto' values are replaced with '0'.
[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse."
[cl2] This paragraph should have 10-pixel top and bottom margins. Remember that vertically adjacent margins "collapse."
[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
[cl3] The height of this paragraph depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
[cl4] The height of this paragraph is 25 pixels. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden'). Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area.
The floated 'div' to the right of this text should be one-quarter the width of its parent element's content area, with 10-pixel top and bottom margins. This will push it downaward 10 pixels, and prevent any inline content from appearing less than 10 pixels from the bottom of its content area. note that line layout may cause more than 10 pixels to appear between the bottom edge of the floated element's content area and inline content beneath it. Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
The height of the floated 'div' to the right of this text depends on its content. It effectively "shrink-wraps" the content, regardless of how short or long it might be.
The height of the floated 'div' to the right of this text is 25 pixels. It effectively "shrink-wraps" the content, regardless of how short or long it might be. If the content is taller than that, it will be treated according to the value of 'overflow' (which is in this test is set to 'hidden').