grid-item-margins-and-writing-modes-001-ref.html (946B)
1 <!DOCTYPE html> 2 <html> 3 <link href="/css/support/grid.css" rel="stylesheet"> 4 <link href="/fonts/ahem.css" rel="stylesheet"/> 5 <style> 6 .block { 7 background-color: grey; 8 width: 80px; 9 height: 80px; 10 position: relative; 11 margin-bottom: 5px; 12 border: 1px solid; 13 } 14 15 .item { 16 font: 15px/1 Ahem; 17 background-color: green; 18 width: 40px; 19 height: 20px; 20 margin: 4px 8px 12px 16px; 21 } 22 </style> 23 24 <body> 25 <div class="block"> 26 <div class="item">X</div> 27 </div> 28 <div class="block verticalRL"> 29 <div class="item">X</div> 30 </div> 31 <div class="block verticalLR"> 32 <div class="item">X</div> 33 </div> 34 <div class="block directionRTL"> 35 <div class="item">X</div> 36 </div> 37 <div class="block directionRTL verticalRL"> 38 <div class="item">X</div> 39 </div> 40 <div class="block directionRTL verticalLR"> 41 <div class="item">X</div> 42 </div> 43 </body> 44 45 </body> 46 </html>