position-area-percents-001-ref.html (1316B)
1 <!DOCTYPE html> 2 <title>Percentage inset/margin/padding in position-area</title> 3 4 <style> 5 .container { 6 width: 100px; height: 100px; 7 border: solid gray; 8 margin: 6px; 9 position: relative; 10 float: left; 11 } 12 13 .anchor { 14 position: absolute; 15 background: silver; 16 inset: 20px 20px 40px 20px; 17 } 18 19 .anchored { 20 border: solid blue 2px; 21 position: absolute; 22 place-self: stretch; 23 inset: 60px 0 0 20px; /* occupy the bottom center-right area */ 24 background: content-box aqua; 25 } 26 27 /* insets (top / left margins here) compute against their own axis */ 28 /* margins (bottom / right margins here) and padding compute against inline axis */ 29 .horizontal { /* margin/padding computes against horizontal */ 30 margin: 8px 4px 4px 16px; 31 padding: 8px; 32 } 33 .vertical { /* margin/padding computes against vertical */ 34 margin: 8px 2px 2px 16px; 35 padding: 4px; 36 } 37 </style> 38 39 <div class=container> 40 <div class="anchor"></div> 41 <div class="anchored horizontal"></div> 42 </div> 43 44 <div class=container> 45 <div class="anchor"></div> 46 <div class="anchored horizontal"></div> 47 </div> 48 49 <div class=container> 50 <div class="anchor"></div> 51 <div class="anchored vertical"></div> 52 </div> 53 54 <div class=container> 55 <div class="anchor"></div> 56 <div class="anchored vertical"></div> 57 </div>