CSS塌陷合并问题

最新推荐文章于 2022-07-11 11:09:08 发布
最新推荐文章于 2022-07-11 11:09:08 发布
阅读量172 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yigerendegeming/article/details/107450796
版权

CSS塌陷合并问题

在这里插入图片描述
我们发现两个元素上下间距并不是结构上div1的margin-bottom的值加上div2的margin-top的值100px，而是仅为60px, 它选择了上下两个元素中margin-top与margin-bottom的最大值作为两者的间距，这就是margin合并现象。

在这里插入图片描述
这与我们想象中的样式不一样，子级元素并没有在父级元素的右下角，它好像现对于浏览器边框定位了。我们增大子级元素的margin-top，发现当margin-top的值大于一定值时，父级元素跟着子级元素移动了一段距离。这种现象就是margin塌陷

解决办法

法1：给父元素定义上边框且设置为transparent（透明）
	border-top: 1px solid transparent;

法2：给父级元素指定一个上padding
	padding-top: 1px;

法3：给父级元素加 overflow：hidden；
2393li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-合并/塌陷
weixin_49344258的博客
10-12 167
margin相关 1.设置元素水平居中：margin:x auto;(X代表上下位置，auto代表左右-水平居中） 2.margin 负值使元素位置及边框合并 3.设置文字垂直居中：line-height 4.一般制作网页时，需要设置margin(外边距-margin相对于上一个元素，如下图）：0；padding(内边距）：0； 5.外边距合并（只存在于垂直的两个盒子之间产生的关系）-外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的 外边距
margin塌陷与合并
qq15045846160的博客
03-18 185
一、margin塌陷。 现象：两个嵌套在一起的盒子，当给第二个盒子设置margin-top属性时，两个盒子将一起移动。 <!DOCTYPE html> <html> <head> <title>margin塌陷</title> <style> *{ ...
margin之边距合并
langrentao的博客
03-18 270
两个div，一个设margin-bottom：40px 一个设margin-top：20px； 2个div的实际边距为40px 边距合并是指两个外边距相遇时会出现只留一个外边距， 边距大小是组合到其中的最大外边距 发生边距合并基本有三种情况： 1 相邻的兄弟姐妹元素 2 块级父元素与其第一个/最后一个子元素 3 空块元素...
CSS外边距合并（塌陷）和解决方法
weixin_72322475的博客
07-11 1799
总结并举例论证了外边距合并（塌陷）的相关情况和解决方法
CSS3——margin合并，塌陷与合并的总结
abraham的博客
11-17 7781
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .demo1{ background-color: red;
谈谈CSS的边距合并之我的理解
09-25
理解并掌握边距合并对于编写高效的CSS代码非常关键，它可以帮助我们避免不必要的布局问题，提升页面布局的灵活性。同时，阅读相关的教程和文档，如提供的链接，能进一步加深理解。在实际开发中，结合实践和调试，你...
css盒子模型 css margin 外边框合并
12-01
外边距合并（也称作外边距塌陷）是CSS布局中的一个关键特性。当两个垂直相邻的元素的外边距相遇时，它们会合并成一个较大的外边距。这在处理段落或列表项等连续元素时尤为常见，可能导致元素之间的间距小于预期。...
解决margin 外边距合并问题
12-14
在实际开发中，开发者还可以利用Flexbox或Grid布局来更灵活地控制元素间距，这些现代布局模型提供了更强大的间距控制手段，可以避免外边距合并问题。 最后，持续学习和实践是提升CSS技能的重要途径。了解和掌握CSS...
css.rar_css_css布局
09-23
3. CSS压缩与合并：减少HTTP请求，压缩CSS代码以减小文件大小。 以上是“css.rar”中可能涵盖的CSS布局相关知识点，通过深入学习和实践，开发者能够构建出高效、美观且适应不同设备的网页布局。
css2.0.rar_css实例
09-23
浮动（float）功能则用于创建多列布局，但可能导致父元素高度塌陷的问题，需要通过clear或overflow属性来解决。 4. **多列布局**：`column-count`和`column-gap`等属性允许开发者创建多列文本布局，这在杂志风格的...
解决外边距（margin）塌陷合并问题
su_yun的博客
11-04 344
一、什么是外边距塌陷 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。 (1) 相邻块元素垂直外边距的合并 1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom 2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 3.取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。 解决方案： 尽量给只给一个盒子添加margin值 代码演示： &.
经典CSS缺陷--margin塌陷问题和margin合并问题
热门推荐
来自星星的博客
01-06 2万+
margin塌陷问题 问题描述： 在文档流中，父元素的高度默认是被子元素撑开的 也就是说 子元素有多高，父元素就有多高 但是当子元素设置浮动之后，子元素会完全脱离文档流 此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷 代码示例： margin塌陷 .parent{ border
CSS：嵌套的块元素，如何控制内部块元素的位置
tiandaochouqin_1的博客
02-14 1203
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。   解决方法： 1.为父元素定义1px的上边框 或 上内边距 2.为父元素添加 overflow:hidden...
CSS合并方法
笑望灬星辰
04-06 1031
CSS合并方法 避免使⽤ @import 引⼊多个 css ⽂件，可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂ 件，例如使⽤ Sass\Compass 等
margin塌陷问题与合并问题
Sunshineanl的博客
04-25 3859
margin塌陷问题与合并问题margin塌陷问题和合并问题都只对垂直方向有效 margin塌陷问题这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。因为在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，因此叫margin塌陷问题。mar
由父子元素margin说开——外边距塌陷（margin-collapse）
sinat_22996989的博客
08-03 7892
布局时往往要遇到div嵌套显示效果，如下： 假设蓝色的为div1，黄色的为div2，为了实现上图所示布局，我的想法是为demo1设置margin:0px auto; demo2位置margin:30px,auto; 代码如下： body{ background-color: darkgray; } *{ margin:0px;
CSS去掉列表的默认样式
yigerendegeming的博客
07-19 2600
去掉列表的默认样式 li{ list-style: none;}
盒子加内边距和变宽的溢出问题
yigerendegeming的博客
07-19 443
盒子加内边距和变宽的溢出问题 1、盒子大小 = 内容的宽度和高度 + 内边距(padding) + 变宽(border) 2、盒子会自动撑大的解决办法 算出盒子大小（由上头公式），然后修改width和height使其放的下 3、如果这个盒子没有宽度，就不会被撑开 ...
CSS 焦点元素
yigerendegeming的博客
01-18 439
CSS 焦点元素 :focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素，像确定光标 :hover 语法： .total input { border: 1px solid #ccc; height: 30px; width: 40px; transition: all .5s; } /*这个input 获得了焦点*/ .total input:focus { width: 80px; border: 1px solid skyblue; } bord
解决CSS外边距塌陷问题的方法和解决原理
最新发布
07-09
CSS边距塌陷问题是指在垂直方向上相邻的两个元素的外边距合并为一个较大的外边距的象。解决该问题的方法有以下几： 1. 使用padding替代margin：将元素的外边距改为内边距，这样就不会出现外边距塌陷的情况。 2. 使用overflow属性：给父元素添加一个overflow属性，可以触发BFC（块级格式化上下文），从而避免外边距塌陷。 3. 使用空元素清除浮动：在相邻元素之间添加一个空的块级元素，并设置clear属性来清除浮动，从而避免外边距塌陷。 4. 使用border或outline属性：给元素添加一个1像素的边框或者轮廓线，可以阻止外边距的合并。 解决原理主要是通过改变元素的布局或者触发特定的渲染规则，从而阻止外边距的合并。不同的方法可以根据具体的布局需求和浏览器兼容性来选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值