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: Margin Collapsing: in flow (height)</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/margin-collapse/019.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
8 <style type="text/css">
9 table { border-spacing: 0; font-size: 50px; border: solid; background: red; }
10 td { padding: 0; width: 1em; }
11
12 div.container, div.after { background: lime; }
13
14 .a .container { height: 1.1em; }
15 .a .sized { height: 1.0em; margin: 0 0 1em 0; }
16 .a .after { height: 0.9em; }
17
18 .b .container { height: 1.0em; }
19 .b .sized { height: 1.0em; margin: 0 0 1em 0; }
20 .b .after { height: 1.0em; }
21
22 .c .container { height: 0.9em; }
23 .c .sized { height: 1.0em; margin: 0 0 1em 0; }
24 .c .after { height: 1.1em; }
25
26 </style>
27 </head>
28 <body>
29 <p>There should be no red on this page.</p>
30 <table>
31 <tr>
32 <td class="a">
33 <div class="container">
34 <div class="sized"></div>
35 </div>
36 <div class="after"></div>
37 </td>
38 <td class="b">
39 <div class="container">
40 <div class="sized"></div>
41 </div>
42 <div class="after"></div>
43 </td>
44 <td class="c">
45 <div class="container">
46 <div class="sized"></div>
47 </div>
48 <div class="after"></div>
49 </td>
50 </tr>
51 </table>
52 <p>See also: <a href="http://www.hixie.ch/tests/adhoc/css/box/block/height/002.html">prerequisite</a>.</p>
53
54
55 </body>
56 </html>