1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html 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/003.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 span { display: inline-block; border: solid blue; color: gray;
11 margin: 0.5em; padding: 0.5em; }
12 </style>
13 </head>
14 <body>
15 <p> Make your window slightly wider than the width of one blue box.
16 All boxes should be the same size. Try increasing the window width
17 so that boxes wrap in two or more columns: the boxes should remain
18 the same size. Try reducing the window width to less than the width
19 of one blue box: the words inside the boxes should wrap and the boxes
20 resize around them so that the boxes continue to fit inside the window. </p>
21 <p>There is filler text in the first line, it should merely indent the first line
22 but not affect the resulting size.</p>
23 <p>
24 (filler text)
25 <span>this is filler text inside an inline block</span>
26 <span>this is filler text inside an inline block</span>
27 <span>this is filler text inside an inline block</span>
28 <span>this is filler text inside an inline block</span>
29 <span>this is filler text inside an inline block</span>
30 <span>this is filler text inside an inline block</span>
31 <span>this is filler text inside an inline block</span>
32 <span>this is filler text inside an inline block</span>
33 <span>this is filler text inside an inline block</span>
34 <span>this is filler text inside an inline block</span>
35 <span>this is filler text inside an inline block</span>
36 <span>this is filler text inside an inline block</span>
37 </p>
38 </body>
39 </html>