negative-margins-001.html (1193B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Flexible Box Test: Negative margins</title> 4 <link rel="author" title="Google Inc." href="https://www.google.com/"> 5 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#item-margins"> 6 <link rel="match" href="reference/negative-margins-001-ref.html"> 7 <meta name="assert" content="Tests that for intrinsic size computations, 8 an item may take up less than zero space when it has negative margins."> 9 <style> 10 .container { 11 width: 40px; 12 background-color: red; 13 line-height: 0px; 14 border: 3px black solid; 15 } 16 17 .flex { 18 display: inline-flex; 19 background-color: green; 20 } 21 22 .item { 23 width: 20px; 24 height: 10px; 25 background-color: green; 26 } 27 28 .first { 29 width: 40px; 30 } 31 32 .neg-marg { 33 margin-left: -40px; 34 } 35 </style> 36 <body> 37 <p>You should see a green rectangle with a black border, 40px wide. You should see no red.</p> 38 39 <div class="container"> 40 <div class="flex"> 41 <div class="item first"></div> 42 <div class="item neg-marg"></div> 43 <div class="item"></div> 44 </div> 45 </div> 46 </body>