html - 内联元素的padding和margin显示效果

Question

在使用内联元素的啥时候,因为存在置换元素的问题,(比如input和img),由于这些内联元素可以生成行内框,那么可以实现宽高的设定,但是其他的一些行内元素比如a,span等,他们在使用过程中对边距的垂直效果不显示,也就是padding-top/bootom,margin-top/bottom是无效的,但是左右却有效,这样的结果实在是非常奇怪.而且好像强行给内联元素设置padding-bottom的话还是会影响到border的显示?这又是为什么呢?
所以想请教各位大神能不能说一说对置换和非置换元素的padding和margin的显示效果,或者类似问题有一个浅显的解释或者一些个人的看法和理解都可以,谢谢!

Answer 1

The

Inline element has margin and padding attributes, but as you might expect the element can only be inline. Margin and padding will only push other elements away in the horizontal direction and remain unchanged in the vertical direction. Inline elements have no height or width, and will be ignored if set.