margin-collapse-030.xht (1785B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Margin collapsing - position of top border edge for elements that collapse margins with parents whose bottom margin only participates in margin collapsing</title> 5 <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> 6 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> 7 <meta name="assert" content="When margins collapse through empty elements and only the parent element's bottom margin is participating in margin collapsing then the position of the elements top border should be in the same position as if the element had a top border specified." /> 8 <style type="text/css"> 9 div 10 { 11 width: 5em; 12 } 13 #div1 14 { 15 border-top: 1em solid black; 16 } 17 #div2 18 { 19 margin-top: 2em; 20 margin-bottom: 4em; 21 border-top: 1em solid black; 22 } 23 #div3 24 { 25 height: 0; 26 margin-top: 2em; 27 margin-bottom: 2em; 28 } 29 #div4 30 { 31 margin-top: 2em; 32 margin-bottom: 2em; 33 border-top: 1em solid black; 34 } 35 </style> 36 </head> 37 <body> 38 <p>Test passes if there are three evenly-spaced black boxes stacked on the page.</p> 39 <div id="div1"> 40 <div id="div2"> 41 <div id="div3"></div> 42 <div id="div4"></div> 43 </div> 44 </div> 45 </body> 46 </html>