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

行内元素的padding、margin是否无效？之前在开发的时候没有注意到这个小细节，现在特此整理出来。

首先行内元素是否具有盒子模型？
答：行内元素同样具有盒子模型。

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

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

    
    
    


    我是span
    
我是div

Paste_Image.png

观察上面这张图，

• span标签左右外边距10px，说明行内元素的margin-left设置是有效的
• span标签左右内边距30px，说明行内元素的padding-left设置是有效的
• span标签上边距为0px，下边距为30px，说明行内元素的padding-top设置是无效的。
• div标签中的文字我是div和span标签中的文字我是span两行相连接，并没有任何间距，说明行内元素的padding-top、padding-bottom并没有被撑开，只是从显示效果上看貌似被撑开了。

---

• Inline elements and padding