inline-block-004

inline-block: width

WeasyPrint

This browser

Flags
interact

Source

 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/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    p { text-indent: 5em; }
11    span { text-indent: 0; display: inline-block; border: solid; margin: 0.5em; padding: 0.5em; }
12   </style>
13  </head>
14  <body>
15   <p> Make your window an inch or two bigger than than the width of
16   one inline-block. All inline-blocks should be the same size. Try
17   resizing the window so that inline-blocks wrap in one or two
18   columns. </p>
19   <p>The first line is indented. Therefore, the first block on the first line, if the
20   line is short enough, should end up wrapping onto two lines internally. The other boxes
21   should be the same size <a href="002.html">as they were without the indent</a>.</p>
22   <p>
23    <span>this is an inline-block this is an inline-block this is an inline-block </span>
24    <span>this is an inline-block this is an inline-block this is an inline-block </span>
25    <span>this is an inline-block this is an inline-block this is an inline-block </span>
26    <span>this is an inline-block this is an inline-block this is an inline-block </span>
27    <span>this is an inline-block this is an inline-block this is an inline-block </span>
28    <span>this is an inline-block this is an inline-block this is an inline-block </span>
29    <span>this is an inline-block this is an inline-block this is an inline-block </span>
30    <span>this is an inline-block this is an inline-block this is an inline-block </span>
31    <span>this is an inline-block this is an inline-block this is an inline-block </span>
32    <span>this is an inline-block this is an inline-block this is an inline-block </span>
33    <span>this is an inline-block this is an inline-block this is an inline-block </span>
34    <span>this is an inline-block this is an inline-block this is an inline-block </span>
35   </p>
36  </body>
37 </html>