行内元素的padding、margin是否无效

132 阅读1分钟

块级元素和行内元素都是盒子模型

块级元素的padding和margin值得设置都是有效的。

行内元素和块级元素一样,都是盒子模型。

while padding can be applied to all sides of an inline element, only left
and right padding will have an effect on surrounding content.
In the example below, 50px of padding has been applied to all sides of the element. As you can see, 
it has an effect on the content on each side, but not on content above or below.

翻译:当对行内元素使用了padding时,只有左右内边距会对周围的元素产生影响,上下只有效果,但是不会产生影响。

结论:

  • 行内元素的padding-top/padding-bottom/margin-top/margin-bottom属性设置是无效的。
  • 行内元素的padding-left/padding-right/margin-left/margin-right属性设置是有效的。
  • 行内元素的padding-top/padding-bottom从显示的效果上是增加的,但其实设置的是无效的。不会对包围它的元素产生任何影响。