外边距塌陷原因和解决方式

2024-04-09 09:33:07

概念

　　外边距塌陷也称外边距合并，在文档流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距，只有在上下外边距才会出现塌陷，左右不会出现。

　　解析：1.两个嵌套块级元素，父元素如果没有上补白和上边框，那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠，取两者较大的值，父元素上的外边距为0，也会发生合并。

　　　　（通俗来说：子元素找不到父元素的border或者padding,就会与父元素上边距重叠）

　　　　 2.两个相邻块级元素，如果上面的元素存在外边距margin-bottom,下面的元素存在外边距margin-top, 那么它们之间外边距不是margin-bottom + margin-top, 而是取两者最大值外边距

外边距计算方式

　　1.两个值为正数，取较大值

　　2.两个值为负数，取绝对值较大的值

　　3.一正一负，取两个值的和

解决方式（父元素）

　　1.border: 1px solid #fff;

　　2.float: left;

　　3.position: absolute;

　　4.padding: 1px;

　　5.display: inline-block;

　　6.overflow: hidden;

　　7.overflow: auto;

外边距塌陷原因和解决方式相关推荐

margin外边距合并问题以及解决方式
margin外边距合并问题以及解决方式汇总简介块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing). 外 ...
转载：margin外边距合并问题以及解决方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
css 外边距塌陷解决方法
内部元素影响外部元素样式,外边距塌陷(BFC) BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-lev ...
详解overflow：hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷）
⼀. overflow:hidden 溢出隐藏给⼀个元素设置overflow: hidden,如果该元素中的内容超出了给定的宽度或⾼度,那么超出的部分将会被隐藏,不占位. <style typ ...
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
一. overflow:hidden 溢出隐藏给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. /*css样式*/ ...
第四天--外边距塌陷
❀外边距塌陷今天来说说外边距塌陷问题,其实本来应该会有更大的收获,但是今天的时光,我下午却用来打游戏了(一直赢),很开心,但是一想到自己什么也没干,就有点愧疚,下面来说说外边距塌陷什么是外边距塌陷 ...
CSS中盒子模型、嵌套盒子中垂直外边距塌陷问题解决方案、标准盒模型、怪异盒模型
盒子模型(Box Model): 指把HTML页面中的元素看作是一个矩形的盒子,也称容器,这个盒子从内到外由:元素的内容(content).内边距(padding).边框(border).外边距(ma ...
外边距塌陷问题及其对策
在做子块级元素相对于父块级元素垂直定位时,如果用margin-top来做定位,会导致外边距塌陷现象出现:简而言之,就是子元素和父元素相对于更大的容器同时下移. 外边距塌陷的意思就是子元素和父元素的垂直 ...
TDK优化模块化思想阿里巴巴矢量库 css文件引入顺序外边距塌陷
2020/12/31 TDK优化标题logo优化模块化开发思想结构拆分阿里巴巴矢量图库 https://www.iconfont.cn/ 选择图标是ui做的引入方式推荐font class ...

最新文章

热门文章