363637-1.html (1923B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 body { background: white; } 5 .rel, body { position: relative; } 6 div > div { direction: ltr; height: 10px; } 7 div > div > div { width: 100px; background: lime; position: absolute } 8 .rtl { direction: rtl; } 9 #testpercentmargin > div > div { margin: 0 4%; } 10 #testabsolutemargin > div > div { margin: 0 20px; } 11 #testpercentpadding > div { padding: 0 4%; } 12 #testabsolutepadding > div { padding: 0 20px; } 13 #testborderparent > div { border-width: 0 20px; border-color: white; border-style: solid; } 14 #testborderkid > div > div { border-width: 0 20px; border-color: white; border-style: solid; } 15 </style> 16 <body style="width: 500px; margin-left: 100px;"> 17 <div id="testplain"> 18 <div><div></div></div> 19 <div class="rel"><div></div></div> 20 <div class="rtl"><div></div></div> 21 <div class="rel rtl"><div></div></div> 22 </div> 23 <div id="testpercentmargin"> 24 <div><div></div></div> 25 <div class="rel"><div></div></div> 26 <div class="rtl"><div></div></div> 27 <div class="rel rtl"><div></div></div> 28 </div> 29 <div id="testabsolutemargin"> 30 <div><div></div></div> 31 <div class="rel"><div></div></div> 32 <div class="rtl"><div></div></div> 33 <div class="rel rtl"><div></div></div> 34 </div> 35 <div id="testpercentpadding"> 36 <div><div></div></div> 37 <div class="rel"><div></div></div> 38 <div class="rtl"><div></div></div> 39 <div class="rel rtl"><div></div></div> 40 </div> 41 <div id="testabsolutepadding"> 42 <div><div></div></div> 43 <div class="rel"><div></div></div> 44 <div class="rtl"><div></div></div> 45 <div class="rel rtl"><div></div></div> 46 </div> 47 <div id="testborderparent"> 48 <div><div></div></div> 49 <div class="rel"><div></div></div> 50 <div class="rtl"><div></div></div> 51 <div class="rel rtl"><div></div></div> 52 </div> 53 <div id="testborderkid"> 54 <div><div></div></div> 55 <div class="rel"><div></div></div> 56 <div class="rtl"><div></div></div> 57 <div class="rel rtl"><div></div></div> 58 </div> 59 </body> 60 </html>