外边距塌陷/外边距合并

外边距合并

外边距合并一般发生在兄弟元素之间。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于：若两个外边距为两正，取较大者，若两个外边距一正一负，取两者之和，若两个外边距都是负值，取值为绝对值较大的外边距。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

外边距塌陷

外边距塌陷一般发生在两个嵌套的的块元素（父子关系）均有margin-top值时，父元素会塌陷较大的top值（塌陷指父元素顶部与上沿的距离），而子元素并不会与父元素顶部产生距离（子元素的margin-top失效），外边距计算方法为：若两个外边距为两正，取较大者，若两个外边距一正一负，取两者之和，若两个外边距都是负值，取值为绝对值较大的外边距。

例：想让子元素在父元素中向下移动50px.

<style>.father{width: 300px;height: 300px;background-color: red;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}
</style><div class="father"><div class="son"></div>
</div>

运行结果：实际现象：可以看到，在给子元素设置margin-top后，父元素也向下移动了50px，父元素也跟着有了外边距，以致于子元素与父元素的相对位置没有改变，没有达到预期的效果

解决方法：

1、将原本设置给子元素的margin值，改为设置父元素的padding值，并相应减少父元素的height，减少值为padding值。

<style>.father{width: 300px;height: 250px;background-color:red;padding-top: 50px;}.son{width: 100px;height: 100px;background-color: blue;}
</style>
<body><div class="father"><div class="son"></div>
</div>
</body>

2.给父元素添加边框属性。并且在父元素中用height减去边框高度，在子元素中用margin-top减去边框高度（因为添加了边框厚度，导致盒子高度变大，这样是为了保证父元素盒子的高度不变）。

<style>.father{width: 300px;height: 295px;background-color:red;border-top: 5px solid black;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 45px;}
</style>
<body><div class="father"><div class="son"></div>
</div>
</body>

3.设置浮动（给父元素或子元素设置float: left）

<style>.father{width: 300px;height: 300px;background-color:red;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 50px;float: left;}
</style>
<body><div class="father"><div class="son"></div>
</div>
</body>

4.给父元素设置overflow：hidden

<style>.father{width: 300px;height: 300px;background-color:red;overflow: hidden;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}
</style>
<body><div class="father"><div class="son"></div>
</div>
</body>

5.给父元素或子元素设置position：absolute属性（绝对定位）

<style>.father{width: 300px;height: 300px;background-color:red;position: absolute;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}</style>
<body>
<div class="father"><div class="son"></div>

6.给父元素或子元素设置display：inline-block

<style>.father{width: 300px;height: 300px;background-color:red;display: inline-block;}.son{width: 100px;height: 100px;background-color: blue;margin-top: 50px;}</style>
<body>
<div class="father"><div class="son"></div>

外边距塌陷/外边距合并相关推荐

【前端知识整理】边距塌陷问题什么是BFC 如何阻止边距塌陷
边距塌陷和BFS 边距塌陷边距塌陷是什么边距塌陷发生的几种情况 1 两个相邻的兄弟姐妹元素之间 2 块级父元素与其第一个/最后一个子元素之间 3 空块元素 BFC 什么是BFC 如何创建(触发)B ...
（盒子模型常见问题）外边距合并问题，嵌套盒子边距塌陷问题解决
1.兄弟盒子边距合并. <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
内外边距问题(清除、合并、塌陷）
清除内外边距简写: *{padding: 0;margin: 0; } 比较正式的话如下: div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fiel ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
第四天--外边距塌陷
❀外边距塌陷今天来说说外边距塌陷问题,其实本来应该会有更大的收获,但是今天的时光,我下午却用来打游戏了(一直赢),很开心,但是一想到自己什么也没干,就有点愧疚,下面来说说外边距塌陷什么是外边距塌陷 ...
外边距塌陷原因和解决方式
概念外边距塌陷也称外边距合并,在文档流中相邻(兄弟或父子关系)的块级元素的外边距组合在一起变成单个外边距,只有在上下外边距才会出现塌陷,左右不会出现. 解析:1.两个嵌套块级元素,父元素如果没有上补 ...
外边距塌陷问题及其对策
在做子块级元素相对于父块级元素垂直定位时,如果用margin-top来做定位,会导致外边距塌陷现象出现:简而言之,就是子元素和父元素相对于更大的容器同时下移. 外边距塌陷的意思就是子元素和父元素的垂直 ...
html css外边距,CSS外边距合并
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 发生外边距塌陷的三种 ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...

外边距塌陷/外边距合并

外边距合并

外边距塌陷

外边距塌陷/外边距合并相关推荐

最新文章

热门文章