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,如此繼續。