-
Q: 行内(inline)元素 设置
margin-top
和margin-bottom
是否起作用?A: 不起作用。(答案是起作用,个人觉得不对。)
html 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。
- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是
img
,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input
等。 - 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。
讨论
margin-top
和margin-bottom
对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。首先我们应该明确外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明
margin-top
和margin-bottom
没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看demo:
- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是