tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

legend-block-margins-2-ref.html (4017B)

      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>Reference for legend block-axis margins</title>
      9 <style>
     10 .fieldset {
     11  display: block;
     12  position: relative;
     13  width: 40px;
     14  border: 2px solid blue;
     15  padding: 4px;
     16 }
     17 .legend {
     18  display: block;
     19  position: absolute;
     20  width: 10px;
     21  height: 20px;
     22  padding: 0;
     23  margin: 0;
     24  background: grey;
     25 }
     26 
     27 .t2 .fieldset { border-top-width: 12px; }
     28 .t3 .fieldset { border-top-width: 12px; }
     29 .t3 .legend { height: 12px; background:white; }
     30 .legend > x { display:block; position:relative; height:6px; background:grey; margin-top:3px; }
     31 
     32 div { border: 1px solid;  margin: 0 2px 10px 0; }
     33 c { display:block; height:10px; background: lightgrey; }
     34 f { float: left; }
     35 </style>
     36 </head>
     37 <body>
     38 
     39 <f>
     40 <div>
     41  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
     42 </div>
     43 
     44 <div>
     45  <span class="fieldset" style="margin-top:19px"><span class="legend" style="top:-11px"></span><c style="margin-top:9px"></c></span>
     46 </div>
     47 
     48 <div>
     49  <span class="fieldset"><span class="legend" style="top:-12px"></span><c style="margin-top:8px"></c></span>
     50 </div>
     51 
     52 <div>
     53  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
     54 </div>
     55 
     56 <div>
     57  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
     58 </div>
     59 
     60 <div>
     61  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:19px"></c></span>
     62 </div>
     63 
     64 <div>
     65  <span class="fieldset" style="margin-top:9px"><span class="legend" style="top:-11px"></span><c style="margin-top:29px"></c></span>
     66 </div>
     67 
     68 <div>
     69  <span class="fieldset"><span class="legend" style="top:-2px; z-index:1"></span><c style="position:relative; z-index:1"></c></span>
     70 </div>
     71 </f>
     72 
     73 <f class=t2>
     74 <div>
     75  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
     76 </div>
     77 
     78 <div>
     79  <span class="fieldset" style="margin-top:14px"><span class="legend" style="top:-16px"></span><c style="margin-top:4px"></c></span>
     80 </div>
     81 
     82 <div>
     83  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
     84 </div>
     85 
     86 <div>
     87  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
     88 </div>
     89 
     90 <div>
     91  <span class="fieldset"><span class="legend" style="top:-20px"></span><c></c></span>
     92 </div>
     93 
     94 <div>
     95  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:14px"></c></span>
     96 </div>
     97 
     98 <div>
     99  <span class="fieldset" style="margin-top:4px"><span class="legend" style="top:-16px"></span><c style="margin-top:24px"></c></span>
    100 </div>
    101 
    102 <div>
    103  <span class="fieldset"><span class="legend" style="top:-12px; height:16px"></span><c></c></span>
    104 </div>
    105 </f>
    106 
    107 <f class=t3>
    108 <div>
    109  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
    110 </div>
    111 
    112 <div>
    113  <span class="fieldset" style="margin-top: 4px"><span class="legend" style="margin-top: -16px"><x style="top:3px"></x></span><c></c></span>
    114 </div>
    115 
    116 <div>
    117  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
    118 </div>
    119 
    120 <div>
    121  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
    122 </div>
    123 
    124 <div>
    125  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
    126 </div>
    127 
    128 <div>
    129  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:4px"></c></span>
    130 </div>
    131 
    132 <div>
    133  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x style="top:-3px"></x></span><c style="margin-top:14px"></c></span>
    134 </div>
    135 
    136 <div>
    137  <span class="fieldset"><span class="legend" style="margin-top: -16px"><x></x></span><c></c></span>
    138 </div>
    139 </f>
    140 
    141 </body>
    142 </html>