margin-collapse-041.xht (2750B)
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 - clear with descendants margins</title> 8 9 <!-- 10 Inspired by 11 http://test.csswg.org/suites/css2.1/20110323/html4/c5525-fltmult-000.htm 12 --> 13 14 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 15 <link rel="reviewer" title="Arron Eicholz" href="arronei(at)gmail.com" /> <!-- 2013-07-30 --> 16 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Jan/0022.html" title="[RC6] c5525-fltmult-000 imprecise and failed by several browsers" /> 17 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins" /> 18 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 19 20 <meta name="assert" content="An element on which 'clear' is set to a value other than 'none' can have its own margin-top collapse with the margin-top of its first inflow block-level child (which may also be the resulting combined margin of its own subtree of descendants) as long as no line boxes, no clearance, no padding and no border separate them." /> 21 22 <style type="text/css"><![CDATA[ 23 body {margin: 8px;} 24 25 p {margin: 1em 0em;} 26 27 div#overlapped-red 28 { 29 background-color: red; 30 height: 100px; 31 position: absolute; 32 width: 100px; 33 z-index: -1; 34 } 35 36 div#floated-left 37 { 38 background-color: green; 39 color: green; 40 float: left; 41 font: 1em/1.25 serif; 42 padding: 15px; 43 /* 44 45 15px : padding-top 46 + 47 20px : line box height 48 + 49 15px : padding-bottom 50 ===== 51 50px 52 53 */ 54 width: 70px; 55 } 56 57 div#cleared-left {clear: left;} 58 59 div#child-of-cleared-left 60 { 61 background-color: red; 62 margin-top: 50px; 63 width: 100px; 64 } 65 66 div#grandchild-of-cleared-left 67 { 68 background-color: red; 69 margin-top: 40px; 70 } 71 72 div#grand-grandchild-of-cleared-left 73 { 74 background-color: green; 75 color: green; 76 height: 50px; 77 margin-top: 30px; 78 } 79 80 /* 81 The idea is to have div#cleared-left's margin-top collapse 82 with div#child-of-clear-left's margin-top. The margin 83 collapsing of margin-tops of descendants of div#cleared-left 84 should occur before calculating clearance. 85 */ 86 ]]></style> 87 88 </head> 89 90 <body> 91 92 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 93 94 <div id="overlapped-red"></div> 95 96 <div id="floated-left">flt lft</div> 97 98 <div id="cleared-left"> 99 <div id="child-of-cleared-left"> 100 <div id="grandchild-of-cleared-left"> 101 <div id="grand-grandchild-of-cleared-left">ggchld</div> 102 </div> 103 </div> 104 </div> 105 106 </body> 107 </html>