negative-margin-001.html (822B)
1 <!DOCTYPE html> 2 <title>Negative margins in LTR/RTL and BFC/non-BFC</title> 3 <link rel="author" title="Koji Ishii" href="kojii@chromium.org"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/box.html#margin-properties" title="Margin properties"> 5 <link rel="match" href="negative-margin-001-ref.html"> 6 <style> 7 html, body { 8 margin: 0; 9 } 10 html { 11 margin-left: 10px; 12 } 13 outer { 14 display: block; 15 border: blue 10px solid; 16 width: 100px; 17 } 18 inner { 19 display: block; 20 border: orange 10px solid; 21 margin-left: -20px; 22 margin-right: -50px; 23 height: 10px; 24 } 25 inner.bfc { 26 overflow: hidden; 27 } 28 </style> 29 <body> 30 <outer> 31 <inner></inner> 32 </outer> 33 <outer dir="rtl"> 34 <inner></inner> 35 </outer> 36 <outer> 37 <inner class="bfc"></inner> 38 </outer> 39 <outer dir="rtl"> 40 <inner class="bfc"></inner> 41 </outer> 42 </body>