CSS | 关于Padding和Margin (Padding百分比和Margin负边距)

Padding和Margin天天用，但有些地方其实很值得考究

1. Padding和Margin的百分比设置：

Padding和Margin的百分比设置是参照父元素的宽度的

 

2. 两个块级盒子在垂直方向上的margin不会相加，而是合并：保留大的那一个,比如

.box1{ margin-bottom:20px;display:block }

.box2{ margin-top:10px; display:block  }

最终只会保留较大的那个20px，注意，如果其中一个是inline-block的话不会合并！
 

3. Padding-top / Padding-bottn:百分比

这个设置方法常用在：需要呈现一个正方形容器，但宽度是百分比设置。

   <div class="container">
        <div class="box1"></div>
    </div> 

   .container{
        width: 100%;
        height: 500px;    
        background-color: pink;
    }
    .box1{
        width: 10%;
        padding-top: 10%;
        background-color: blue;
    }