盒子嵌套带来的margin塌陷问题的6种解决办法

最新推荐文章于 2022-04-01 14:21:46 发布
最新推荐文章于 2022-04-01 14:21:46 发布
阅读量327 收藏 1
点赞数
原文链接：http://www.cnblogs.com/laijun/p/7474997.html
版权

在嵌套盒子中给子盒子设置一个margin-top后，会传递给父级元素，带来marin塌陷问题

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904161639194-2090194468.png

6中解决方法

1.给父盒子添加border（添加border之后，父子元素就不是真正意义上的贴合）

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            border:1px solid greenyellow;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904161824007-1944360410.png

2.给父盒子设置padding-top

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            padding-top:10px;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904162026397-381361653.png

3.给父盒子添加overflow:hidden

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            overflow:hidden;//触发BFC
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904184244319-421788716.png

4.父盒子：position:fixed;

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            position:fixed;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904184158616-1476103331.png

5.父盒子：display:table;

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            display:table;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904184119538-1043402720.png

6.利用伪元素给子元素的前面添加一个元素

<style type="text/css" rel="stylesheet">
        body{
            margin:0;
            padding:0;
        }
        *{
            box-sizing:border-box;
        }
        .inner:before{
            content:"";
            overflow:hidden;
        }
        .wrap{
            width:200px;
            height:200px;
            background-color:darkgrey;
            display:table;
        }
        .inner{
            width:100px;
            height:100px;
            background-color:blanchedalmond;
            margin-top:30px;
        }
    </style>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>

效果如图所示
1215426-20170904183933257-1427769483.png

转载于:https://www.cnblogs.com/laijun/p/7474997.html

weixin_30267691
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
有遇到过margin重叠/塌陷问题吗？BFC?
小草莓的博客
04-17 854
1、什么是margin重叠/塌陷？ 2、开发中常见的margin塌陷 3、出现margin塌陷的原因 4、什么是BFC？ 5、BFC的6个特性 6、BFC的功能总结 7、触发BFC的CSS属性 8、解决margin塌陷的办法 ① 对于父子元素 ② 对于兄弟元素
margin塌陷问题的理解和原理
qq_53963503的博客
11-29 984
margin塌陷问题的理解和原理
CSS盒子高度塌陷的解决方法
weixin_45709829的博客
04-01 2498
CSS盒子高度塌陷的解决方法 一、盒子塌陷 （1）什么是盒子塌陷 高度塌陷，当所有的子元素浮动的时候，且父元素没有高度设置，这时候会产生父元素高度塌陷，本应该在父盒子内部的元素跑到外面。 正常显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box {
盒子的margin塌陷问题解决方案（嵌套盒子出现margin无效）
涂涂
01-15 2770
1.上边距取最大值~~ 发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值 eg: html: <div class="father"> <div class="son"> </div> </div> css: .father{ ...
DIV布局十大技巧以及DIV盒子模型
07-05
8. **盒模型理解**：`DIV`的盒子模型包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。理解并合理应用盒子模型，有助于精确控制元素尺寸和间距。 9. **百分比单位**：使用百分比...
盒子模型PPT学习教案.pptx
10-10
网页设计中的布局往往是多个盒子的嵌套和排列。通过调整盒子模型的各个属性，我们可以精确控制元素的尺寸和位置，实现各种复杂的布局效果。例如，通过设置适当的内边距和外边距，可以使元素在页面上保持一定的间距，...
水平垂直居中.docx
11-24
BFC的布局规则可以解决很多布局问题，例如解决浮动元素的高度塌陷问题、解决margin合并问题等。BFC的布局规则可以分为两种：块级盒子和行内盒子。 块级盒子是指display属性为block、list-item或table的元素，它们会...
2des
03-20
3. 双倍边距：在某些情况下，开发者可能会无意中为元素设置了双倍边距，这是因为CSS中的边距塌陷（margin collapsing）现象。为了解决这个问题，可以使用`border-box`盒模型或者设置`clearfix`类来避免边距重叠。 4...
HomeWork-1
03-07
为解决此问题，可以使用clear属性清除浮动。 6. **响应式设计**：随着设备屏幕尺寸的变化，CSS媒体查询（@media rule）允许我们根据设备特性应用不同的样式，实现响应式网页设计。 7. **Flexbox和Grid布局**：...
盒子塌陷的原因？解决方法
zhou_ya_nan的博客
11-26 2308
导致塌陷的主谋----浮动 原因一：浮动的脱落标准流 原因二：嵌套的两个盒子，子盒子设置margin-top会导致父盒子一下子下移 解决方法 第一：清除浮动 第二：给父盒子加高度 第三：给父元素添加overflow：hidden 针对原因一： 1.可以给父元素加上边框 2.可以给父元素添加overflow:hidden ...
关于盒子塌陷的几种解决方法
小猪的博客
10-25 1715
1、最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。 2、给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。 3、给父盒子添加overflow属性。 overflow:a...
* 盒子模型塌陷的三种解决方法
Zero____________的博客
07-04 747
**1.**为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合(可以设置成透明：border：1px solid transparent)。 **2.**为父盒子添加overflow：hidden；(溢出部分隐藏) **3.**为父盒子设定padding值；(把子盒子踢开) ...
如何解决margin塌陷以及margin合并
热门推荐
shi_1204的博客
05-05 1万+
什么是外边距合并，以及常见的几种情况 外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。 所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。 发生合并的情况有以下几种： 两个元素是兄弟关系： .两个元素是父子关系（没有内边距或边框把外边距分割开）： 一个空元素，没...
关于盒子模型中margin叠加现象的归类与思考
F-ZERO-F的博客
07-31 978
问题由来 在对嵌套元素的子元素进行垂直方向上的居中操作时，采用margin-top会出现父元素和子元素一同下移的现象无法达到想要的效果。 &amp;amp;lt;!--html代码块--&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;father&amp;quot;&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;son&amp;quot;&amp
CSS知识（盒子模型、margin、padding、分组和嵌套）
weixin_39618279的博客
01-28 679
1、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距)- 清除边框外的区域，外边距是透明的。 Border(边框)- 围绕在内边距和内容外的边框。 Padd..
解决CSS margin带来的塌陷问题
通俗易懂
06-28 2966
塌陷问题 就是当父元素包裹子元素时，子元素设置margin-top时，并不是子元素上边距离父元素上边一段距离，而是子元素和父元素同时距离bfc（块级格式上下文）下边的距离 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
如何解决 margin“塌陷
最新发布
06-09
Margin塌陷也称为Margin合并，是指在两个或多个盒子之间嵌套时，父元素的上边距和子元素的上边距发生合并，导致上边距的高度变小的现象。这种情况通常发生在块级元素中。 要解决Margin塌陷，可以采用以下方法： 1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值