外边距+内边距+边框详解

外边距+内边距+边框详解

1. 外边距(margin)

   margin可以设置盒子和盒子之间的距离

   若想要盒子水平居中，则必须满足两个条件：
   (1).盒子必须设置宽度
   (2).让左右外边距为auto(margin: 10px auto)

   若想要让行内元素或行内块元素水平居中，则只需要给其父元素添加text-align:center;即可

   有关外边距最经典的问题就是嵌套块元素垂直外边距的塌陷

.father {
            width: 400px;
            height: 400px;
            background-color: violet;
            margin-top: 100px;
            /* overflow: hidden; */
            /* border-top: 1px solid red; */
            /* padding-top: 10px; */
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: wheat;
            margin-top: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            margin-top: 30px;
}
<div class="father">
        <div class="son">
        </div>
</div>

上述代码执行结果如下图所示：

由上图可以发现，明明给既给.father设置了margin-top，也给.son设置了margin-top，但是结果只是给.father设置了margin-top，这就是发生了嵌套块元素发生了垂直外边距的塌陷
解决办法：
（1）为父元素设置上边框(改变了父元素，不推荐)
（2）为父元素设置上内边距(改变了父元素，不推荐)
（3）为父元素添加overflow: hidden属性(推荐)
为父元素添加overflow: hidden属性后，运行结果如下：

2. 内边距(padding)

   如果盒子本身设置了宽高，若设置padding值，会使盒子变大(即使是width=100%，也会改变盒子大小)
   但如果盒子本身没有设置宽高，若设置padding值，盒子大小不会发生改变

3. 边框(border)
   边框与内边距一样，设置之后默认都会改变元素的大小