其他分享
首页 > 其他分享> > 嵌套块元素垂直外边距的合并(塌陷)

嵌套块元素垂直外边距的合并(塌陷)

作者:互联网

对于两个嵌套关系的块元素,若父元素无上内边距或边框,就会发生合并 (即塌陷)。

css代码:

 1 <style>
 2             * {
 3                 margin: 0;
 4                 padding: 0;
 5             }
 6             .box {
 7                 width: 500px;
 8                 height: 500px;
 9                 background-color: #22DD22;
10                 margin-top: 15px;
11                 /* border-top: 1px  solid #22DD22; */
12                 /* padding-top: 10px; */
13                 /* overflow: hidden; */
14             }
15             .sub_box {
16                 width: 200px;
17                 height: 200px;
18                 background-color: #FFFF00;
19                 margin-top: 10px;
20             }
21         </style>
View Code

运行:

解决方案:

      1、为父元素添加上边框

  2、为父元素添加上内边距

  3、为父元素添加overflow:hidden

解决后的效果:

 

标签:塌陷,top,元素,嵌套,添加,内边,外边,为父,margin
来源: https://www.cnblogs.com/heisetianshi/p/14978114.html