display：inline with margin，padding，width，height [英] display:inline with margin, padding, width, height

问题描述

如果我为任何元素设置 display：inline ，则 margin ， padding ， width ， height 不会影响该元素吗？

是否需要使用 float：left 或 display：block 或 display：inline-block 使用 margin ， padding ，<$ c $

解决方案

>

请参阅CSS规格中的内置格式上下文解释。

基本上，可以对内联级元素设置边框，填充和边框，但它们可能不会按预期运行。如果只有一行，行为可能会OK，但同一个流中的其他行可能表现出不同于您的期望的行为（即不会遵守填充）。此外，如果您的内联框包含可破坏元素并达到包含元素的边距，则可以将其破坏;

找到一个很好的列表示例： http://www.maxdesign.com.au/articles/inline/

If I set display:inline for any element then will margin, padding, width, height not affect on that element?

Is it necessary to use float:left or display:block or display:inline-block to use margin, padding, width, height on that element?

解决方案

Please see "Inline formatting contexts" at the CSS spec for the full explanation.

Basically margin, padding and border can be set on inline-level elements, but they may not behave as you expect. The behavior will probably be OK if there's only one line, but other lines in the same flow will likely exhibit behavior different from your expectations (i.e. padding will not be respected). In addition, your inline box can be broken if it contains breakable elements and reaches the margin of the containing element; in that case, at the point of break, margins and padding will not be respected as well.

Found a nice example of that with lists: http://www.maxdesign.com.au/articles/inline/

这篇关于display：inline with margin，padding，width，height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！