为什么水平边距不会崩溃为垂直边距？ [英] Why horizontal margin doesn't collapse as vertical margin?
问题描述
我明白为什么会出现利润损失。我已经在各种网站上看到很少的例子，如何发生和为什么会发生。
具体来说，以下是我读的帖子的链接：
https://css-tricks.com/almanac/properties/m / margin /
这清楚地解释了折叠是垂直发生的，它是为了某种目的而实现的。但是，提到这不会发生在水平边距（左和右），只有垂直（顶部和底部）。没有解释为什么它不发生在水平
没有找到答案。
只是出于好奇我想知道，为什么水平边缘崩溃不会发生？任何帮助赞赏。
水平边距从来没有机会崩溃，因为管理边缘崩溃的规则意味着他们永远不会满足
在CSS中，两个或多个框的邻接边距（可能是或不是兄弟）可以组合形成一个单边距。组合这种方式的边缘据说崩溃，并且所得到的组合边缘被称为折叠边缘。
折叠边缘 http://www.w3.org/TR/CSS21/box.html ＃collapsing-margins ）
相邻框只能是块级框：
当且仅当以下情况时，两个边距相邻：
- 都属于流程块级参与同一个区块格式上下文的方块
折叠边距（ http://www.w3.org/TR/CSS21/box.html#collapsing-margins ）
如果边框未悬浮或绝对定位，边距只会折叠：
< blockquote>
- 浮动框和任何其他框之间的边距不会折叠（即使在浮动框和其流内子项之间也不会折叠）。
- 建立新区块格式上下文的元素（例如浮动和overflow而非visible的元素）的边界不会与其流内子代折叠。
- 绝对定位框的边距不会折叠（即使是流内的子级）。
折叠边距（ http://www.w3.org/TR/CSS21/box.html#collapsing-margins ）
这意味着block-水平框不能水平地位于同一水平线上（因为默认情况下，块水平框将自动从新行开始），并且同时满足边距折叠条件。
理论上，内联框可以满足条件，但因为它们不是块级的，所以规则根本不适用于它们。
在内联格式化上下文中，框是从包含块的顶部开始水平排列的。
内联格式化上下文（ http://www.w3.org/TR/CSS21/visuren.html#block-formatting ）
也就是说，他们没有崩溃的简单原因是W3C这么说：
$ b $
折叠页边距（ http://www.w3.org/TR/CSS21/box.html#collapsing-margins ）
I understand why margin collapsing happens. I have seen few examples on various sites as to how it happens and why it happens.
To be specific, the below is the link to the post I read:
https://css-tricks.com/almanac/properties/m/margin/
It's clearly explained that the collapsing happens vertically and it was implemented like that for a purpose. But, it's mentioned that "This does not happen on horizontal margins (left and right), only vertical (top and bottom)." No explanation has been provided as to why it doesn't happen on horizontal margins.
Didn't find an answer else where.
Just out of curiosity I wanna know, why horizontal margin collapsing doesn't occur? Any help appreciated.
Horizontal margins never get the chance to collapse as the rules that govern margin collapsing mean that they can never satisfy the conditions.
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
Adjoining boxes can only be block-level boxes:
Two margins are adjoining if and only if:
- both belong to in-flow block-level boxes that participate in the same block formatting context
Collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
And margins only collapse if they are not floated or positioned absolutely:
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
This means that block-level boxes can never be positioned on the same line horizontally (as block-level boxes will automatically start on a new line by default) and satisfy the margin collapsing conditions at the same time.
In theory, inline boxes could satisfy the conditions but as they are not block-level the rules do not apply to them at all.
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
Inline formatting contexts (http://www.w3.org/TR/CSS21/visuren.html#block-formatting)
That said, the simple reason why they don't collapse is that W3C said so:
Horizontal margins never collapse.
Collapsing margins (http://www.w3.org/TR/CSS21/box.html#collapsing-margins)
这篇关于为什么水平边距不会崩溃为垂直边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
