CSS块元素嵌套塌陷问题（div嵌套margin无法改变内div外边距）

-Lorry-

于 2023-04-03 17:53:28 发布

阅读量189

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_70285310/article/details/129935210

版权

原因：

嵌套两个块元素时，内元素设定margin后不起作用，

如：

代码：

效果如图：

按理代码来说蓝色块应该往下50像素，但实际并没有效果

原因是：

嵌套使得产生了塌陷效果，外边距会按照margin值大的那个整体一起下降。

上图就是父子块一起下降了100像素，如果box2的margin值大于box1的那就会执行box2的，读者

可自行试一试。

解决方法

有三种方法：

1、给父元素加上透明边框

2、给父元素定义上内边框

3、给父元素添加overflow：hidden

一般我们都用第三种，快速且简单。

我只演示第三种，前两种我会在最后放上演示源码。

添加overflow：hidden

效果：

成功解决

三种方法源码：

1、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    
<style>
    .box1{
        width: 1200px;
        height: 600px;
        margin: 100px auto;
        background-color: pink;
        border: 1px solid transparent;
    }
     .box2{
         width: 600px;
         height: 400px;
         margin-top: 50px;
         background-color:blue;
     }
</style>
</head>
<body>
   <div class="box1">
      <div class="box2">    
      </div>
   </div>
</body>
</html>

2、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    
<style>
    .box1{
        width: 1200px;
        height: 600px;
        margin: 100px auto;
        background-color: pink;
        padding-top: 1px;
    }
     .box2{
         width: 600px;
         height: 400px;
         margin-top: 50px;
         background-color:blue;
     }
</style>
</head>
<body>
   <div class="box1">
      <div class="box2">    
      </div>
   </div>
</body>
</html>

3、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    
<style>
    .box1{
        width: 1200px;
        height: 600px;
        margin: 100px auto;
        background-color: pink;
        overflow: hidden;
    }
     .box2{
         width: 600px;
         height: 400px;
         margin-top: 50px;
         background-color:blue;
     }
</style>
</head>
<body>
   <div class="box1">
      <div class="box2">    
      </div>
   </div>
</body>
</html>

ps：前两种方法会改变父框的大小

-Lorry-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS块元素嵌套塌陷问题（div嵌套margin无法改变内div外边距）

嵌套两个块元素时，内元素设定margin后不起作用，如：代码：效果如图：按理代码来说蓝色块应该往下50像素，但实际并没有效果原因是：嵌套使得产生了塌陷效果，外边距会按照margin值大的那个整体一起下降。上图就是父子块一起下降了100像素，如果box2的margin值大于box1的那就会执行box2的，读者可自行试一试。
复制链接

扫一扫