table-caption-margins-001.xht (1401B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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/tables.html#model" title="17.4 Tables in the visual formatting model" /> 7 <meta name="assert" content="The table caption's margins do not collapse 8 with the margins applied to the table wrapper box."/> 9 <style type="text/css"> 10 .control { 11 margin: 15px; 12 width: 6em; 13 border: 15px red; 14 border-style: solid none; 15 background: repeat-x 0 40px url(support/swatch-red.png); 16 } 17 .container { 18 margin: -15px 0; 19 border: solid blue 15px; 20 border-style: solid none; 21 } 22 .table { 23 display: table; 24 height: 15px; 25 width: 6em; 26 margin: 20px 0 40px; 27 background: blue; 28 } 29 .caption { 30 display: table-caption; 31 height: 15px; 32 width: 6em; 33 background: blue; 34 margin: 20px 0 40px; 35 } 36 </style> 37 38 </head> 39 <body> 40 <p>There must be four evenly-spaced blue bars and no red.</p> 41 <div class="control"> 42 <div class="container"> 43 <div class="table"> 44 <div class="caption"></div> 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>