CSS2 Test Suite: 10.3.1 Computing widths and margins: inline, non-replaced elements

[index page] [section] [Previous] [Next] [Specification]

The style declarations contained within this page:

.bookend {background: #FCC;}
.test {background: #9F9;}
.cl1 {width: 200px;}
.cl2 {padding: 0 10px;}
.cl3 {border: 10px solid green; border-width: 0 10px;}
.cl4 {margin: 0 10px;}
.cl5 {padding: 0 10px; border: 10px solid green; border-width: 0 10px; margin: 0 10px;}
.cl6 {margin: 0 auto;}


This 'p' element contains a 'span' element with a class of 'test cl1', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl1] this is a span[bookend]. The test span's width should be equal to the size of the content, and it should not be 200 pixels wide, as 'width' is ignored for inline non-replaced elements. The left and right padding, borders, and margins should all have zero width.

This 'p' element contains a 'span' element with a class of 'test cl2', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl2] this is a span[bookend]. The test span's right and left padding should each be 10 pixels wide.

This 'p' element contains a 'span' element with a class of 'test cl3', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl3] this is a span[bookend]. The test span's right and left borders should each be 10 pixels wide (and solid green).

This 'p' element contains a 'span' element with a class of 'test cl4', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl4] this is a span[bookend]. The test span's right and left margins should each be 10 pixels wide.

This 'p' element contains a 'span' element with a class of 'test cl5', surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl5] this is a span[bookend]. The test span's right and left padding, borders, and margins should each be 10 pixels wide, and the width should be equal to the size of the content.

This 'p' element contains a 'span' element with a class of 'test cl6'., surrounded by 'span' elements with a class of 'bookend'. These elements are here: [bookend][test cl6] this is a span[bookend]. The test span's right and left margins should have zero width.


[index page] [section] [Previous] [Next] [Specification]