margin失效问题——嵌套块元素引起的外边距坍塌

当一个div嵌套了另一个div时，父盒子设置了外边距，如:margin-top:50px;内部的子盒子也设置一个外边距margin-top:100px时，会发现子元素并没有如预期所想，与父盒子有个边距。反而父盒子与相领的盒子的margin取了2者的最大值。
如下所示：

    <div class="father"><div class="son1"></div><div class="son2"></div></div>

**预期：**父盒子距离顶部50px,第一个子盒子距离父盒子的上边框100px，距离第二个子盒子bottom+top，希望是150px。

    .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;}.son1 {margin-top: 100px;margin-bottom: 50px;background-color: yellow;width: 50px;height: 50px;}.son2 {margin-top: 100px;background-color: green;width: 50px;height: 50px;}

实际上：
第一个子盒子距离上边框100px，同时也带着父盒子也距离上边框100px。

第二个子盒子距离上一个是100px，不是预期的150px。

解决
1.父元素添加overflow:hidden;

 .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;overflow: hidden;}

2.父元素添加border

    .father {margin-top: 50px;background-color: pink;width: 200px;height: 300px;border-top: 1px solid transparent;}

3.父元素添加padding

    .father {padding-top: 1px;margin-top: 50px;background-color: pink;width: 200px;height: 300px;}

margin失效问题——嵌套块元素引起的外边距坍塌相关推荐

什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
BFC机制 BFC(Block Formatting Context):块格式化上下文 BFC是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其余元素的关系和相互 ...
【我不熟悉的html】p标签不能嵌套块元素(p、div等)
<p><span>今天是个好日子.</span><div>内部的div</div> </p> 这段代码渲染出来的结构是这样的,结 ...
p标签不能嵌套块元素 p标签嵌套p标签不生效
先给大家来一个错误示范: <div><p v-if="Array.isShow"><p v-for="item in Array.d ...
内联元素与块级元素及内外边距的影响
内联元素与块级元素块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素常用的块级元素:div.h1~h6.dl. ...
【css】浮动和定位对元素的宽度-外边距或其他元素的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
HTML布局是外边距咋表示,布局页面设置百分比子元素如何设置外边距？
一般header和footer 是高度固定的,屏幕充满的话可以选择绝对定位,子元素就可以使用百分比了,楼主只给了固定高度的样式,没有给使用百分比设置的样式,怎么修改还是要看具体情况圣杯布局 body ...
CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠外边距重叠是指两个或多个盒子(可能相邻也可 ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...

margin失效问题——嵌套块元素引起的外边距坍塌

margin失效问题——嵌套块元素引起的外边距坍塌相关推荐

最新文章

热门文章