margin-collapse-clear-012.xht (2872B)
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 - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</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-012-ref.xht" /> 14 15 <meta content="When an element has had clearance applied to it and its own margins collapse, these margins collapse with the adjoining margins of following siblings but the resulting margin does not collapse with the bottom margin of the parent block" 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 border-top: black solid 1px; 24 width: 50%; 25 } 26 27 #float-left-blue 28 { 29 background-color: blue; 30 float: left; 31 height: 100px; 32 width: 100px; 33 } 34 35 #clear-left 36 { 37 clear: left; 38 margin-bottom: 80px; 39 margin-top: 40px; 40 } 41 42 #following-sibling {margin-bottom: 140px;} 43 44 #next-yellow 45 { 46 background-color: yellow; 47 height: 100px; 48 } 49 50 .ref-overlapped-red 51 { 52 background-color: red; 53 position: absolute; 54 z-index: -1; 55 } 56 57 #ref1 58 { 59 height: 200px; 60 top: 1px; 61 width: 50%; 62 } 63 64 #ref2 65 { 66 height: 100px; 67 top: 201px; 68 width: 100%; 69 } 70 ]]></style> 71 72 </head> 73 74 <body> 75 76 <p>Test passes if there is <strong>no red</strong>.</p> 77 78 <div id="rel-pos-wrapper"> 79 80 <!-- 81 82 #parent-lime should have height 200px, sum of: 83 84 100px : height of #float-left-blue 85 + 86 (140px - 40px) : part of #following-sibling's margin-bottom 87 "exceeding" the amount collapsed with 88 #clear-left's margin-top (140px - 40px) 89 ======= 90 200px 91 92 --> 93 94 <div id="parent-lime"> 95 <div id="float-left-blue"></div> 96 <div id="clear-left"></div> 97 98 <!-- 99 100 clearance 101 + 102 margin-top of #clear-left (40px) 103 ==================================== 104 height of #float-left-blue (100px) 105 106 therefore, clearance is equal to +60px 107 108 --> 109 110 <div id="following-sibling"></div> 111 </div> 112 113 <div id="next-yellow"></div> 114 115 <!-- 116 #ref1 and #ref2 boxes create a sort of 'reference rendering' 117 where #ref1 should be covered, overlapped by #parent-lime 118 while #ref2 should be covered, overlapped by #next-yellow. 119 --> 120 121 <div id="ref1" class="ref-overlapped-red"></div> 122 <div id="ref2" class="ref-overlapped-red"></div> 123 124 </div> 125 126 </body> 127 </html>