inline-block-004.xht (2122B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 3 <head> 4 <title>CSS Test: inline-block: width</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/inline-block/004.html" type="text/html"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> 8 <meta name="flags" content="interact"/> 9 <style type="text/css"> 10 html:before { content: ""; position: absolute; width: 598px; height: 598px; border: solid thin; } 11 p { text-indent: 5em; } 12 span { text-indent: 0; display: inline-block; 13 border: blue solid; color: silver; 14 margin: 0.5em; padding: 0.5em; } 15 </style> 16 </head> 17 <body> 18 <p> Make your window an inch or two bigger than than the width of 19 one inline-block. All inline-blocks should be the same size. Try 20 resizing the window so that inline-blocks wrap in one or two 21 columns. </p> 22 <p>The first line is indented. Therefore, the first block on the first line, if the 23 line is short enough, should end up wrapping onto two lines internally. The other boxes 24 should be the same size <a href="002.html">as they were without the indent</a>.</p> 25 <p> 26 <span>this is an inline-block this is an inline-block</span> 27 <span>this is an inline-block this is an inline-block</span> 28 <span>this is an inline-block this is an inline-block</span> 29 <span>this is an inline-block this is an inline-block</span> 30 <span>this is an inline-block this is an inline-block</span> 31 <span>this is an inline-block this is an inline-block</span> 32 <span>this is an inline-block this is an inline-block</span> 33 <span>this is an inline-block this is an inline-block</span> 34 <span>this is an inline-block this is an inline-block</span> 35 <span>this is an inline-block this is an inline-block</span> 36 <span>this is an inline-block this is an inline-block</span> 37 <span>this is an inline-block this is an inline-block</span> 38 </p> 39 </body> 40 </html>