CSS中怎样处理外边距塌陷难题

日期:2021-02-27 类型:科技新闻 

关键词:凡科自助建站,企业网站怎么建设,智能建站系统,自己建个网站,搭建网站基本步骤

最先大家先看出現外边距塌陷的3种状况:

1.当左右邻近的两个块级元素相遇,上面的元素有下边距margin-bottom,下面的元素有上边距margin-top,则它们之间的竖直间距取两个值中的较大者。

<style>
  .box1 {
     width: 150px;
     height: 100px;
     margin-bottom: 20px;
     background-color: rgb(201, 239, 98);
  }
  .box2 {
     width: 100px;
     height: 100px;
     background-color: rebeccapurple;
     margin-top: 10px;
  }
</style>
   <div class="box1"></div>
   <div class="box2"></div>

这时候候两个盒子之间的竖直间距并不是30px,而是20px。

处理方式:

尽可能只给1个盒子加上margin值

2.针对两个嵌套循环关联的块元素,假如父元素沒有上内边距及边框,父元素的上外边距会与子元素的上外边距产生合拼,合拼后的外边距为二者中的较大者。

<style>
        .box1 {
            width: 150px;
            height: 100px;
            margin-top: 20px; 
            /* border: 1px solid #000000; */
            background-color: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            /* border: 1px solid #000000; */
            background-color: rebeccapurple;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

这时候候两个盒子会产生合拼,上外边距为20px。

处理方法:

①给父元素界定上边框

②给父元素界定上内边距

③给父元素加上 overflow:hidden;

④加上波动

⑤加上肯定精准定位

3.假如存在1个空的块级元素,border、padding、inline content、height、min-height都不存在,那末左右边距正中间将沒有任何隔绝,左右外边距可能合拼。

<p style="margin-bottom: 0px;">这个段落的和下面段落的间距将为20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的间距将为20px</p>

能够了解成正中间div宽度为0且左右边距结合,只取margin的最大值。

到此这篇有关CSS中怎样处理外边距塌陷难题的文章内容就详细介绍到这了,更多有关CSS外边距塌陷內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!