inline元素的margin与padding

替换元素与非替换元素

替换元素(replaced element)：所谓替换元素就是浏览器根据元素的标签和属性，来决定元素具体显示什么内容。好比说：img标签的src属性的值用来读取图片信息而且显示出来。又好比说，input标签的type属性决定是显示输入框仍是单选按钮。html中的img、input、textarea、object、video、embed都是替换元素。

非替换元素(non-replaced element): 是指内容包含在文档里的元素。好比p、span等等。

margin-top/margin-bottom与padding-top/padding-bottom

在考虑inline的时候，咱们就须要考虑inline元素究竟是行内可替换元素仍是行内不可替换元素。

讨论margin-top和margin-bottom对行内非替换元素是否其做用:

1. 规范容许margin能够设置到行内元素。

2. 因为向一个行内非替换元素应用margin，对行高没有影响。

3. 而且margin是透明的，因此声明margin-bottom, margin-top没有任何视觉效果。

4. 而对于行内非替换元素应用左右的margin，是有影响的。

讨论margin-top和margin-bottom对行内替换元素是否其做用:

1. 为行内替换元素设置margin会影响行高。

2. 因此margin-top和margin-bottom是有视觉效果的。

3. 对行内替换元素应用左右的margin，也是有影响的。

讨论padding-top和padding-bottom对行内非替换元素是否其做用:

1. 明确是有做用的，能够设置背景颜色看出来。

2. 不会影响block布局。

讨论padding-top和padding-bottom对行内替换元素是否其做用:

1. 明确是有做用的，能够设置背景颜色看出来。

2. 也会影响block布局的。

参考:

是否是inline元素就不能设置宽高margin，padding？

CSS中的一些概念