css——百分比设置margin（外边距）

对元素的margin（外边距）可以设置百分数值。

对元素的 margin（外边距）设置百分数值：百分数是相对于父元素的width来计算的。

HTML：

<div class="contain">
     <div class="d1"></div>
</div>

css：

 .contain{
           width: 500px;
           height:400px;
       }
       .d1{
           width:100px;
           height: 100px;
           background:#af2727;
           margin: 1%;
       }

控制台中查看 d1 盒子情况：

可以发现：margin的 top，right，bottom，left都是 5px，即相对于width计算得出。

为什么是相对于父元素的 width 呢？《CSS权威指南》中是这样说的：

正常流中的大多数元素都会足够高以包含其后代元素(包括其外边距)。如果一个元素的上下外边距是父元素的height的一个百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应地，上下外边距又必须增加，以适应新的父元素height,如此继续。