为什么百分比保证金会导致换行? [英] Why does a percentage margin cause a new line?

问题描述

<div style = "float : left; background-color: #dd3fb8;">
    <a style = "margin-left : 10%;">a</a> 
    <a>b</a> 
    <a>c</a> 
</div>

在上面的示例中，字母"c"将在新行上，但是如果我将"margin-left"设置为px单位，则"c"将与"a"和"b"在同一行上.为什么会这样?

In the example above, the letter "c" would be on new line, but if I set "margin-left" to px unit, "c" would be on the same line as "a" and "b". Why does this happen?

推荐答案

不幸的是，CSS2.1规范似乎对此没有明确的答案.实际上，我会说这完全属于未定义行为的范围.

Unfortunately, the CSS2.1 spec doesn't appear to have a clear answer to this. In fact, I would say this is well within the realm of undefined behavior.

以下是我可以找到的相关要点:

Here are the relevant points I can find:

• 没有指定宽度的浮标将缩小以适合其内容.对于仅具有内联内容的浮点数，需要使浮点数足够宽，以使其内容适合单行(尽管有明确的换行符)，而且不能再增加其他内容.

• Floats without a specified width will shrink to fit their contents. In the case of floats with only inline content, the float needs to be made just wide enough to fit its contents on a single line (notwithstanding explicit line breaks) and no more.

百分比容限根据包含的宽度计算阻止.

Percentage margins are calculated based on the width of the containing block.

请注意，它说:

如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义.

If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

...但是据我所知，该行为在所有浏览器中都是一致的.

... but as far as I can see, the behavior is consistent across all browsers.

话虽这么说，该语句之所以适用，是因为由于内联元素的边距落在float的内容范围之内，因此可以说float的宽度(内联元素的包含块)取决于在this元素(具有边距的元素)上.

That being said, the reason this statement applies is because since the margin of the inline element falls within the content bounds of the float, it can be said that the width of the float (the containing block of the inline elements) depends on the this element (the element having the margin).

根据以上几点，我可以推论:

Here's what I can deduce based on the points above:

• 将边距指定为百分比时，浮点数的宽度会在不考虑边距的情况下进行计算，因为无法计算边距直到浮点数的宽度已经确定.

• When the margin is specified as a percentage, the width of the float is calculated without taking the margin into account, because it's not possible to calculate the margin until the width of the float has been determined.

然后根据浮标的使用宽度来计算边距，由于"a"上的边距将字母"c"向前推动，因此字母"c"换行了. 浮子的宽度不变.

The margin is then calculated based on the used width of the float, and the letter "c" wraps to a new line as a result of being pushed forward by the margin on "a". The width of the float does not change.

再次，完全没有指定此行为，因此从技术上讲，它不违反规范.但是，这似乎很明智.

Again, none of this behavior is specified at all, and so technically it's not in violation of the spec. However, it seems sensible.

如果将空白指定为像素值，则首先计算空白.然后考虑此边距来计算浮点数的宽度(请记住，水平边距确实照常应用于行内元素).根据缩小到适合的算法，这是首选的宽度:正好足以在一行中包含所有内联元素的宽度.

When the margin is specified as a pixel value, the margin is calculated first. The width of the float is then calculated taking this margin into account (remember that horizontal margins do apply to inline elements as normal). Per the shrink-to-fit algorithm, this is the preferred width: just wide enough to contain all the inline elements on a single line.

与保证金百分比不同，这是非常明确的，因为实现应该毫不费力地首先计算保证金的绝对值.

Unlike with percentage margins, this is very clear-cut, as implementations should have no trouble calculating computing absolute values for margins first.

在任何一种浏览器中，我都很难将其称为错误，特别是因为它们的行为都是一致的.

I would be hard-pressed to call this a bug in any of the browsers, especially since they all behave consistently.

当然，最后，您可以完全避免这种未定义的行为，只需在可能的情况下为浮动对象提供明确的宽度即可.但是，了解为什么您应该这样做的确有帮助.

Lastly, of course, you can avoid this undefined behavior entirely simply by giving your floats explicit widths where possible. It does help to understand why you should do so, however.

这篇关于为什么百分比保证金会导致换行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！