外边距+内边距+边框详解
-
外边距(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属性后,运行结果如下:
-
内边距(padding)
如果盒子本身设置了宽高,若设置padding值,会使盒子变大(即使是width=100%,也会改变盒子大小)
但如果盒子本身没有设置宽高,若设置padding值,盒子大小不会发生改变 -
边框(border)
边框与内边距一样,设置之后默认都会改变元素的大小