flex-container-margin-ref.html (762B)
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 <style> 7 .flex-container{ 8 display:block; 9 margin:20px; 10 background: #333; 11 line-height: 0px; 12 } 13 .flex-item{ 14 display: inline-block; 15 width:50px; 16 height:50px; 17 margin:20px 20px; 18 background: #eee; 19 } 20 .flex-item.first{ 21 margin-left:20px; 22 } 23 .flex-item.last{ 24 margin-right: 20px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="flex-container"> 30 <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> 31 </div> 32 </body> 33 </html>