flex-abspos-staticpos-margin-002-ref.html (2787B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Reference</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .container { 13 display: block; 14 padding: 1px 2px; 15 border: 1px solid black; 16 background: yellow; 17 margin-bottom: 5px; 18 margin-right: 10px; 19 float: left; /* For testing in "rows" of containers */ 20 } 21 br { clear: both } 22 23 .big > .container { 24 height: 14px; 25 width: 20px; 26 } 27 .small > .container { 28 height: 2px; 29 width: 4px; 30 } 31 32 .container > * { 33 background: teal; 34 height: 6px; 35 width: 8px; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="big"> 41 <!-- Margin just on one side: --> 42 <div class="container"><div style="margin: 3px 0 0 12px"></div></div> 43 <div class="container"><div style="margin: 0 0 0 9px"></div></div> 44 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 45 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 46 <!-- Margin on all sides: --> 47 <div class="container"><div style="margin: 1px 0 0 10px"></div></div> 48 <br> 49 50 <!-- "auto" margin on just one side (should be treated as 0): --> 51 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 52 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 53 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 54 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 55 <!-- "auto" margin on all sides (should be treated as 0): --> 56 <div class="container"><div style="margin: 0 0 0 12px"></div></div> 57 <br> 58 </div> 59 <div class="small"> 60 <!-- Margin just on one side: --> 61 <div class="container"><div style="margin: 3px 0 0 -4px"></div></div> 62 <div class="container"><div style="margin: 0 0 0 -7px"></div></div> 63 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 64 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 65 <!-- Margin on all sides: --> 66 <div class="container"><div style="margin: 1px 0 0 -6px"></div></div> 67 <br> 68 69 <!-- "auto" margin on just one side (should be treated as 0): --> 70 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 71 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 72 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 73 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 74 <!-- "auto" margin on all sides (should be treated as 0): --> 75 <div class="container"><div style="margin: 0 0 0 -4px"></div></div> 76 <br> 77 </div> 78 </body> 79 </html>