年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/，里面有一道题目涉及到了margin和padding单位为百分比的情况。写出来记录一下以防止自己忘记。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .warp{ 8 width:500px; 9 height:300px; 10 overflow: hidden; 11 background-color: #279186; 12 position: relative; 13 } 14 .ctx{ 15 padding:10%; 16 margin:10%; 17 width:100px; 18 height:50px; 19 background-color: #A56D1C; 20 } 21 .top{ 22 position: absolute; 23 width: 100%; 24 top:50px; 25 left:0; 26 padding:0; 27 margin:0; 28 color:#333; 29 height:1px; 30 border:0 none; 31 background-color: #333; 32 } 33 .left{ 34 position: absolute; 35 width:1px; 36 height:100%; 37 left:50px; 38 top:0; 39 background-color: #333; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="warp"> 45 <div class="ctx"></div> 46 <!-- 辅助线 --> 47 <hr class="top " /> 48 <div class="left "></div> 49 </div> 50 </body> 51 </html>
在浏览器里表示为
可以见到，padding和margin的单位，都可以用百分比来表示。
之后我又在其他浏览器里测试了一下兼容性，虽然这种百分比单位的方式在PC端用的不是很普遍。
只有IE6下出现了问题。 ie6下marginTop的距离是不对的 IE6效果如下
但是在chrome，IE 7 8 9 10 ，FireFox浏览器上都表现良好