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

Question

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

Answer 1

Inline元素有margin和padding属性，但是如你预期那般元素只能是内联的。Margin和padding只会在水平方向上将其他元素推开，垂直方向上不变。内联元素没有高度和宽度，设置了将被忽略。