块级元素的宽度不能折叠而高度可以折叠是什么意思?

您能否从W3.org规范中解释以下文本:

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以合并形成一个边距。 据说以这种方式组合的边距已塌陷,所得的合并边距称为塌陷边距。

崩溃一词的含义在这里引起了很多混乱。

#1楼 票数:1 已采纳

折叠边距是当两个不同元素的边距占据相同空间时为实例指定的名称。

考虑以下示例:

 .box { height: 50px; width: 50px; } .box1 { background: red; margin-bottom: 25px; } .box2 { background: blue; margin-top: 50px; } 
 <div class="box box1"></div> <div class="box box2"></div> 

很难说,但是两个方框之间的空格只有50px 你可能会认为它应该75px ,因为我已经指定了margin-bottom25px的机顶盒和margin-top50px的底盒。 25 + 50 = 75 ,为什么空白只有50px?

嗯,边距内不能有任何内容 余量专门表示内容不足 考虑到没有内容要显示在边缘,解析器认为可以将它们组合起来以优化空间。

之所以出现“ 崩溃 ”一词,是因为技术上在同一时间同时存在两个不同的边距“段”,彼此“折叠”。

请注意, margin-leftmargin-right 不会发生这种情况:

 .box { height: 50px; width: 50px; float: left; } .box1 { background: red; margin-right: 25px; } .box2 { background: blue; margin-left: 50px; } 
 <div class="box box1"></div> <div class="box box2"></div> 

上面的空间确实是75px 这可能是一个令人困惑的概念,但是请务必注意,它仅会影响垂直边距。 有关折叠边距的更多信息,请参见CSS TricksMozilla

还需要注意的是,默认情况下,块级元素占用其父元素宽度100% ,但占用其height的 0%

这是说明此的示例:

 .parent { background: blue; border: 10px solid purple; height: 50px; width: 200px; } .child { background: red; } 
 <div class="parent"> <div class="child">Text</div> </div> 

在上面的示例中,我未在父级上指定widthheight ,但未在子级上指定widthheight 正如你所看到的,子元素继承了200px宽度,但继承50px高度。

希望这有助于澄清这一点!

  ask by Hammad Ahmed translate from so

未解决问题?本站智能推荐:

1回复

JS:使用X像素的边距获取长宽比

我有一个在框架中显示网页的应用程序。 该帧应为1280x720像素,但有时会渲染为1280x719或1281x720。 现在,我发现此脚本可以根据任何给定的宽度和高度来计算比率: 当视口正好为1280x720像素时,这可以很好地工作,但是当视口为1280x719或1281x720时,
1回复

如何使浮动元素的边距折叠

如何使这些浮动 div 的垂直边距折叠? .container { display: block; padding: 1px; max-width: 500px; } .float-left { display: block; float: left; margin: 20px; }
11回复

如何禁用边距折叠?

有没有办法完全禁用边距折叠? 我发现的唯一解决方案(以“uncollapsing”为名)需要使用 1px 边框或 1px 填充。 我觉得这是不可接受的:无关的像素无缘无故地使计算复杂化。 有没有更合理的方法来禁用这种边距折叠?
2回复

在将表单元素居中时,这些CSS属性意味着什么?

在搜索如何在CSS居中form元素时,我发现我必须将margin设置为auto ,然后设置width属性。 但是, width代表什么? 例如,当我将width设置为350px我将窗体设置为中心,而当将其设置为5px ,我不会将其置于中心位置。 你能解释一下width代表什么吗?
2回复

当我将高度更改为百分比值时,元素会折叠

我正在研究我的第二个网络项目(自学),我有一个新手问题。 我的页面中有一个模拟页眉和页脚,其高度均为100px。 我试图改变这一点,以便高度以百分比表示但是当我这样做时它们会崩溃。 为什么? 码: HTML CSS @font-face {font-family:
1回复

孩子之间的flexbox边距崩溃

这个问题已经在这里有了答案: 边距在flexbox中崩溃 2个答案 带有display:block边距的容器内的2个元素折叠,但带有display:flex的容器不起作用! 例
1回复

如何在调整窗口大小时加速 CSS 中的边距缩小?

我正在尝试在 html/css 中制作一些响应式布局。 我有一个自动边距,网站内容占宽度的 60%。 当我调整窗口大小时,边距正在缓慢缩小。 我想达到类似于 Spotify 的效果 - 这是波兰 Spotify 网站的链接。 所以我需要的只是在调整窗口大小的同时加速边距收缩。 我该如何处理?
2回复

有没有办法通过边距或其他方式减少元素的高度?

由于我想要一个固定高度的条形图和一个占据页面其余部分的地图,所以这很好。 我已经尝试过像这样: 如果创建了这个小提琴: http : //jsfiddle.net/bmPpq/ PS我一直在网上积极寻找解决方案,但没有成功(除了使用JS之外,但这很糟糕..) 基本上这就