margin-collapse-120

Margin Collapsing: in flow (height)

WeasyPrint

This browser

Source

 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/020.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 { background: lime; }
13 
14    .a .container { height: 2.1em; }
15    .a .sized { height: 1.0em; margin: 0 0 1em 0; }
16    .a .after { height: 0.9em; }
17 
18    .b .container { height: 2.0em; }
19    .b .sized { height: 1.0em; margin: 0 0 1em 0; }
20    .b .after { height: 1.0em; }
21 
22    .c .container { height: 1.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="019.html">prerequisite</a>.</p>
53  
54 
55 </body>
56 </html>