c411-vt-mrgn-000.xht (4762B)
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: Vertical Formatting</title> 5 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#vertical-formatting"/> 6 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> 7 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 8 9 <style type="text/css"><![CDATA[ 10 11 /* test */ 12 p.one { margin-top: 0; margin-bottom: 2cm; } 13 p.two { margin-top: 2cm; margin-bottom: 0; } 14 p.three { margin-top: 0; margin-bottom: 0; } 15 p.four { margin-top: -1cm; margin-bottom: 0; } 16 div.five { margin-top: 1cm; margin-bottom: 1cm; padding-top: 1cm; } 17 p.six { margin-top: 1cm; margin-bottom: 1cm; } 18 p.seven { margin-top: 1cm; margin-bottom: 0; } 19 p.eight { margin-top: 0; margin-bottom: -1cm; padding-bottom: 2cm; } 20 p.nine { margin-top: -1cm; margin-bottom: 1cm; padding-top: 1cm; } 21 p.ten { margin-top: 1cm; margin-bottom: 0; float: left; width: 50%; } 22 p.eleven { margin-top: 1cm; margin-bottom: 0; } 23 p.twelve { margin-top: 0; margin-bottom: 0; padding-bottom: 1cm; clear: both; } 24 p.thirteen { margin-top: 0; margin-bottom: 0; padding-top: 1cm; } 25 26 /* control */ 27 td { width: 5em; padding: 0; border: solid; } 28 .p { margin: 0; padding: 0; height: auto; } 29 .h1 { margin: 0; padding: 0; height: 1cm; } 30 .h2 { margin: 0; padding: 0; height: 2cm; } 31 .h3 { margin: 0; padding: 0; height: 3cm; } 32 .w50 { width: 50%; } 33 .l50 { margin-left: 50%; } 34 .contain { position: relative; } /* XXX relies on CSS2 stuff */ 35 .bottom { position: absolute; bottom: 0; } 36 .left { position: absolute; left: 0; } 37 38 /* colours */ 39 .teal, .test { background: teal; } 40 .yellow, .one, .seven, .thirteen { background: yellow; } 41 .fuchsia, .two, .eight { background: fuchsia; } 42 .lime, .three, .nine { background: lime; } 43 .white, .four, .ten { background: white; } 44 .aqua, .five, .eleven { background: aqua; } 45 .orange, .six, .twelve { background: orange; } 46 47 ]]></style> 48 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins"/> 49 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'"/> 50 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'"/> 51 </head> 52 <body> 53 <p>The two columns below should be identical.</p> 54 <table> 55 <tr> 56 <td class="test"> 57 <p class="one"> - </p> 58 <p class="two"> - </p> 59 <p class="one"> - </p> 60 <p class="three"> - </p> 61 <p class="one"> - </p> 62 <p class="four"> - </p> 63 <div class="five"> 64 <p class="six"> - </p> 65 </div> 66 <p class="seven"> - </p> 67 <p class="eight"> - </p> 68 <p class="nine"> - </p> 69 <p class="ten"> - </p> 70 <p class="eleven"> - </p> 71 <p class="twelve"> - </p> 72 <p class="thirteen"> - </p> 73 </td> 74 <td class="control"> 75 <div class="yellow p">-</div> 76 <div class="teal h2"></div> 77 <div class="fuchsia p">-</div> 78 <div class="yellow p">-</div> 79 <div class="teal h2"></div> 80 <div class="lime p">-</div> 81 <div class="yellow p">-</div> 82 <div class="teal h1"></div> 83 <div class="white p">-</div> 84 <div class="teal h1"></div> 85 <div class="aqua h2"></div> 86 <div class="orange p">-</div> 87 <div class="teal h1"></div> 88 <div class="yellow p">-</div> 89 <div class="fuchsia p">-</div> 90 <div class="fuchsia h1"></div> 91 <div class="lime h1"></div> 92 <div class="lime p">-</div> 93 <div class="teal h1"></div> 94 <div class="aqua"><div class="l50 p">-</div></div> 95 <div class="teal h1 contain"><div class="white p bottom left w50">-</div></div> 96 <div class="orange p">-</div> 97 <div class="orange h1"></div> 98 <div class="yellow h1"></div> 99 <div class="yellow p">-</div> 100 </td> 101 </tr> 102 </table> 103 </body> 104 </html>