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 Tables: 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/table/016.xml" type="application/xhtml+xml">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
8 <style type="text/css">
9 div#wrapper
10 {
11 border: blue solid medium;
12 height: 188px;
13 /*
14 20px (margin-top) + 1px + 20px (content) + 1px + max(20px, 20px) 1st div table
15 + 1px + 20px (content) + 1px + max(20px, 20px) 2nd div table
16 + 1px + 20px (content) + 1px + max(20px, 20px) 1st p table
17 + 1px + 20px (content) + 1px + 20px 2nd p table
18 --------------------------------------------------------
19 188px
20 */
21 }
22
23 .table
24 {
25 border: 1px solid silver;
26 border-spacing: 0;
27 display: table;
28 font: 20px/20px Ahem;
29 height: 1em;
30 margin: 1em;
31 }
32
33 div.table-row
34 {
35 display: table-row;
36 }
37
38 div.cell
39 {
40 display: table-cell;
41 }
42 </style>
43 </head>
44 <body>
45 <p>There should be four black bars below that do not overflow the blue box.</p>
46 <div id="wrapper">
47 <div class="table">
48 <div class="table-row">
49 <div class="cell">Test</div>
50 </div>
51 </div>
52 <div class="table">
53 <div class="table-row">
54 <div class="cell">Test</div>
55 </div>
56 </div>
57 <p class="table">Test</p>
58 <p class="table">Test</p>
59 </div>
60 <p>This test has passed if the black bars are evenly distributed in the blue box. The gap between the blue border at the top and the first black bar should be equal to the gap between the 4th bar and the blue border at the bottom.</p>
61 </body>
62 </html>