margin、padding单位百分比

时间：2023-01-31 09:47:02

　　年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/，里面有一道题目涉及到了margin和padding单位为百分比的情况。写出来记录一下以防止自己忘记。

　　

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         .warp{

             width:500px;

             height:300px;

             overflow: hidden;

             background-color: #279186;

             position: relative;

         }

         .ctx{

             padding:10%;

             margin:10%;

             width:100px;

             height:50px;

             background-color: #A56D1C;

         }

         .top{

             position: absolute;

             width: 100%;

             top:50px;

             left:0;

             padding:0;

             margin:0;

             color:#333;

             height:1px;

             border:0 none;

             background-color: #333;

         }

         .left{

             position: absolute;

             width:1px;

             height:100%;

             left:50px;

             top:0;

             background-color: #333;

         }

     </style>

 </head>

 <body>

     <div class="warp">

         <div class="ctx"></div>

         <!-- 辅助线 -->

         <hr class="top " />

         <div class="left "></div>

     </div>

 </body>

 </html>

在浏览器里表示为

margin、padding单位百分比

可以见到，padding和margin的单位，都可以用百分比来表示。

之后我又在其他浏览器里测试了一下兼容性，虽然这种百分比单位的方式在PC端用的不是很普遍。

只有IE6下出现了问题。 ie6下marginTop的距离是不对的 IE6效果如下

margin、padding单位百分比

但是在chrome，IE 7 8 9 10 ，FireFox浏览器上都表现良好

相关文章