inlines-003

CSS Inline Box Model: Wrapping Borders

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>
 3  <head>
 4   <title>CSS Test: CSS Inline Box Model: Wrapping Borders</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/003.xml" type="application/xhtml+xml">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">
 8   <meta name="flags" content="interact">
 9   <style type="text/css">
10    div { font: 2em/2 sans-serif; }
11    span { border: thick solid blue; padding: 0 1em; }
12   </style>
13  </head>
14  <body>
15   <p>Slowly resize the window, causing the text below to wrap into multiple
16    lines at different points in the text. At all points in time, each word
17    should be enclosed in a blue rectangle and there should be no stray
18    pieces of blue rectangle anywhere else on the page.</p>
19   <div> <span>Resize</span> <span>the</span> <span>window</span> <span>so</span> <span>that</span> <span>this</span> <span>wraps</span> </div>
20  </body>
21 </html>