margin-collapse-clear-014.xht (2762B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: Margin collapsing with clearance - clearance may be negative</title> 8 9 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" /> 11 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 12 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> 13 <link rel="match" href="margin-collapse-clear-014-ref.xht" /> 14 15 <meta content="Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin." name="assert" /> 16 17 <style type="text/css"><![CDATA[ 18 #rel-pos-wrapper {position: relative;} 19 20 #parent-lime 21 { 22 background-color: lime; 23 width: 50%; 24 } 25 26 #preceding-sibling-aqua 27 { 28 background-color: aqua; 29 height: 60px; 30 margin-bottom: 40px; 31 } 32 33 #float-left-blue 34 { 35 background-color: blue; 36 float: left; 37 height: 100px; 38 width: 100px; 39 } 40 41 #clear-left 42 { 43 clear: left; 44 margin-top: 120px; 45 } 46 47 #next-yellow 48 { 49 background-color: yellow; 50 height: 100px; 51 } 52 53 .ref-overlapped-red 54 { 55 background-color: red; 56 position: absolute; 57 z-index: -1; 58 } 59 60 #ref1 61 { 62 height: 200px; 63 top: 0px; 64 width: 50%; 65 } 66 67 #ref2 68 { 69 height: 100px; 70 top: 200px; 71 width: 100%; 72 } 73 ]]></style> 74 75 </head> 76 77 <body> 78 79 <p>Test passes if there is <strong>no red</strong>.</p> 80 81 <div id="rel-pos-wrapper"> 82 83 <!-- 84 85 #parent-lime should have height 200px, sum of: 86 87 60px : height of #preceding-sibling-aqua 88 + 89 40px : margin-bottom of #preceding-sibling-aqua 90 + 91 100px : height of #float-left-blue 92 ===================================================== 93 200px 94 95 --> 96 97 <div id="parent-lime"> 98 <div id="preceding-sibling-aqua"></div> 99 <div id="float-left-blue"></div> 100 <div id="clear-left"></div> 101 </div> 102 103 <!-- 104 105 clearance 106 + 107 margin-top of #clear-left (120px) 108 ==================================== 109 height of #float-left-blue (100px) 110 111 therefore, clearance is equal to -20px 112 113 --> 114 115 <div id="next-yellow"></div> 116 117 <!-- 118 #ref1 and #ref2 boxes create a sort of 'reference rendering' 119 where #ref1 should be covered, overlapped by #parent-lime 120 while #ref2 should be covered, overlapped by #next-yellow. 121 --> 122 123 <div id="ref1" class="ref-overlapped-red"></div> 124 <div id="ref2" class="ref-overlapped-red"></div> 125 126 </div> 127 128 </body> 129 </html>