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: Table Caption Margin Collapsing</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">
7 <meta name="assert" content="The table caption's margins do not collapse with the margins applied to the outer table box.">
8 <style type="text/css">
9 .control {
10 margin: 15px;
11 width: 6em;
12 border: 15px red;
13 border-style: solid none;
14 background: repeat-x 0 40px url(support/swatch-red.png);
15 }
16 .container {
17 margin: -15px 0;
18 border: solid blue 15px;
19 border-style: solid none;
20 }
21 .table {
22 display: table;
23 height: 15px;
24 width: 6em;
25 margin: 20px 0 40px;
26 background: blue;
27 }
28 .caption {
29 display: table-caption;
30 height: 15px;
31 width: 6em;
32 background: blue;
33 margin: 20px 0 40px;
34 }
35 </style>
36
37 </head>
38 <body>
39 <p>There must be four evenly-spaced blue bars below and no red.</p>
40 <div class="control">
41 <div class="container">
42 <div class="table">
43 <div class="caption"></div>
44 </div>
45 </div>
46 </div>
47 </body>
48 </html>