1108923-1-percentage-margins.html (803B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .outer { 7 writing-mode:vertical-rl; 8 -webkit-writing-mode:vertical-rl; 9 width:600px; 10 height:200px; 11 border:1px solid gray; 12 background:#eee; 13 } 14 .test1 { 15 border:10px solid green; 16 margin-top:50%; /* should be 50% of 200px, i.e. 100px */ 17 width:80px; 18 height:30px; 19 } 20 .test2 { 21 border:10px solid blue; 22 margin-right:25%; /* should be 25% of 200px, i.e. 50px */ 23 margin-left:10%; /* should be 10% of 200px, i.e. 20px */ 24 width:80px; 25 height:30px; 26 } 27 .test3 { 28 border:10px solid yellow; 29 margin-top:10%; /* should be 10% of 200px, i.e. 20px */ 30 width:80px; 31 height:30px; 32 } 33 </style> 34 </head> 35 36 <body> 37 38 <div class="outer"> 39 40 <div class="test1"> 41 </div> 42 43 <div class="test2"> 44 </div> 45 46 <div class="test3"> 47 </div> 48 49 </div> 50 51 </body> 52 </html>