盒子模型的外边距塌陷和合并问题及解决方案

morgan 发布于2019-08-29 17:30 / 1195人阅读

摘要：外边距塌陷当嵌套的两个块元素给子盒子加向上的外边距时父盒子会跟着掉下来此时就是外边距塌陷解决方案给父盒子加给父盒子加上边框给父元素加属性当同一个效果能用解决就最好不用解决注意盒子在网页中所占地面积自身宽高内边距边框外边距外边距合并当垂直排列

外边距塌陷:

         当嵌套的两个块元素,给子盒子加向上的外边距时,父盒子会跟着掉下来,此时就是外边距塌陷.
          解决方案:
         1.给父盒子加padding
         2.给父盒子加上边框
         3.给父元素加overflow:hidden 属性
         
         当同一个效果能用padding解决就最好不用margin解决

注意：盒子在网页中所占地面积=自身宽高+内边距+边框+外边距

外边距合并:
当垂直排列的两个块元素,同时给上面的盒子加向下的外边距,给下面的盒子加向上的外边距,此时会造成外边距合并,当数值相同的时候,就是那个值,当值不同的时候,取最大的那个值

GPU服务器云服务器 html 的外边距外边距重叠 html外边距上下 html外边距颜色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114368.html

HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

frank_fun 2019-08-01 18:29 评论0 收藏0
HTML、CSS笔记

摘要：相邻的兄弟元素相邻的两个兄弟元素之间的外边距会塌陷。块级父元素与其第一个最后一个子元素如果块级父元素中，上边框宽度及上内边距距离为时，此时这个块级父元素和其第一个子元素就会发生上外边距合并现象。盒模型在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。在标准模式下，一个块的总宽度=...

Aomine 2019-08-29 14:22 评论0 收藏0
CSS（三）

摘要：盒子模型示意图如下把元素叫做盒子，设置对应的样式分别为盒子的边框盒子内的内容和边框之间的间距盒子与盒子之间的间距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。CSS盒子模型盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(bor...

番茄西红柿 2019-04-23 13:43 评论0 收藏0
【css】常见问题

摘要：将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的属性设为，设置属性和是没有用的。这个属性值融合了和的特性，即是它既是内联元素，又可以设置和。 CSS 中 inline 元素可以设置 padding 和 margin 吗？行内元素设置width,height无效。但是设置margin和padding是有效的。行内非替换元素的外边距不会改变一个...

renweihub 2019-08-29 16:25 评论0 收藏0