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: :first-line and margin collapsing</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/block/first-line/011.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">
8 <style type="text/css">
9 td { width: 8em; padding: 0; border: solid; }
10 .test { background: orange; }
11 .test .a { margin: 0 0 1em 0; background: teal; height: 1em; }
12 .test .b { margin: 0 0 0 0; background: red; }
13 .test .c { margin: 1em 0 0 0; background: yellow; height: 1em; }
14 .test.fl .b:first-line { color: red; }
15 .control { background: red; }
16 .control .a { border-top: 1em teal solid; }
17 .control .b { border-top: 1em orange solid; }
18 .control .c { border-top: 1em yellow solid; }
19 </style>
20 </head>
21 <body>
22 <p>The next three boxes should look identical. (If the second and
23 third look different, then margin collapsing through empty elements
24 is broken. Go to <a href="../margin-collapse/">these tests</a> for
25 more details.)</p>
26 <table>
27 <tr>
28 <td class="fl test">
29 <div class="a"></div>
30 <div class="b"></div>
31 <div class="c"></div>
32 </td>
33 <td class="test">
34 <div class="a"></div>
35 <div class="b"></div>
36 <div class="c"></div>
37 </td>
38 <td class="control">
39 <div class="a"></div>
40 <div class="b"></div>
41 <div class="c"></div>
42 </td>
43 </tr>
44 </table>
45 </body>
46 </html>