flex-container-margin.html (828B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> 5 <link rel="author" title="houzhenyu" href="http://www.github.com/sskyy" /> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#item-margins"> 7 <link rel="match" href="reference/flex-container-margin-ref.html"> 8 <meta name="assert" content="The margins of adjacent flex items do not collapse." /> 9 <style> 10 .flex-container{ 11 display: flex; 12 margin:20px; 13 background: #333; 14 } 15 .flex-item{ 16 width:50px; 17 height:50px; 18 margin:20px; 19 background: #eee; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="flex-container"> 25 <div class="flex-item"></div> 26 <div class="flex-item"></div> 27 <div class="flex-item"></div> 28 </div> 29 </body> 30 </html>