The style declarations contained within this page:
.test {background: #9F9;}
.cl1 {height: 200px;}
.cl2 {padding: 10px 0;}
.cl3 {border: 10px solid green; border-width: 10px 0;}
.cl4 {margin: 10px 0;}
.cl5 {padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
.cl6 {margin: auto 0;}
This 'p' element contains a 'span' element with a class of 'test cl1'. This elements is here: [test cl1] this is a span. The test span's height should be equal to the size of the content, and it should not be 200 pixels tall, as 'height' is ignored for inline non-replaced elements. The top and bottom padding, borders, and margins should all have zero width.
This 'p' element contains a 'span' element with a class of 'test cl2'. This elements is here: [test cl2] this is a span. The test span's top and bottom padding should be 10 pixels tall. Padding on non-replaced elements does not increase line height, and so the padding may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom padding may appear to be zero.
This 'p' element contains a 'span' element with a class of 'test cl3'. This elements is here: [test cl3] this is a span. The test span's top and bottom borders should be 10 pixels tall (and solid green). Borders on non-replaced elements do not increase line height, and so the borders may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." Therefore the top and bottom borders may not appear.
This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: [test cl4] this is a span. The test span's top and bottom margins should be 10 pixels tall. Margins on non-replaced elements do not increase line height, and so the top and bottom margins should have no visible effect on layout.
This 'p' element contains a 'span' element with a class of 'test cl5'. This elements is here: [test cl5] this is a span. The test span's top and bottom padding, borders, and margins should be 10 pixels tall. Padding and borders on non-replaced elements do not increase line height, and so they may overlap other lines of text (or be overlapped by them). Per CSS2 section 10.8.1, however, "user agents may use the line box to 'clip' the border and padding areas (i.e., not render them)." The margins should have no visible effect on layout in either case.
This 'p' element contains a 'span' element with a class of 'test cl4'. This elements is here: [test cl4] this is a span. The test span's top and bottom margins should have no height, which means no visible effect on line layout.