flex-margin-no-collapse.html (1181B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Flexible Box Test: flex item margins</title> 5 <link rel="author" title="Ping Huang" href="mailto:phuangce@gmail.com" /> 6 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> 7 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins"> 8 <link rel="match" href="reference/flex-margin-no-collapse-ref.html"> 9 <meta name="assert" content="The vertical gap between two green boxs should be 100px." /> 10 <style type="text/css"> 11 #container { 12 display: flex ; 13 flex-direction: column; 14 position: absolute; 15 top: 100px; 16 left: 10px; 17 width: 200px; 18 height: 300px; 19 } 20 21 .box { 22 width: 100px; 23 height: 100px; 24 background-color: green; 25 flex: none; 26 } 27 28 #box1 { 29 margin: 50px 0; 30 } 31 32 #box2 { 33 margin: 50px 0; 34 } 35 36 #red-box { 37 position: absolute; 38 top: 350px; 39 left: 10px; 40 width: 100px; 41 height: 100px; 42 background-color: red; 43 } 44 </style> 45 </head> 46 <body> 47 <p>The test passes if there are two green boxes and no red.</p> 48 <div id="red-box"></div> 49 <div id="container"> 50 <div id="box1" class="box"></div> 51 <div id="box2" class="box"></div> 52 </div> 53 </body> 54 </html>