inline元素与padding margin的爱恨情仇

最近在刷面试题的时候遇到一个问题：CSS 中 inline 元素可以设置 padding 和 margin 吗？找了几篇博客，发现大家说的都不太一样。

于是乎，有了这篇总结。

在HTML元素中，分为非替换元素和替换元素。

非替换元素： 内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示，例如<span>hello</span>，文本"hello"将由用户代理显示。

替换元素：是指用来替换元素内容的部分并由文档内容直接表示。以<img>元素最为典型，例如<img src="hello.jpg" />，这个标记不包含任何内容，除非将其指向一个外部内容（这里是src属性指向一个图像），否则这个元素没有任何意。

讨论inline元素设置的padding和 margin是否有效，需要区分非替换元素和替换元素来讨论。

首先，我们先来看看CSS标准中的margin规定：

margin.png
意思是非替换元素不能设置竖直方向上的margin，而替换元素是ok的。我们来验证一下：
非替换元素设置margin
我们看到只有左右的外边距生效了，而垂直方向上并没有生效。并且父元素也不会被撑开。
我们接着试验一下设置替换元素的margin值： 替换元素设置margin
我们看到在垂直方向上margin生效并且可以撑开父元素。

接着我们来看看CSS标准中的padding规定

padding.png
看起来没有说什么情况不能用的样子，我们来测试一下： 非替换元素设置padding-1
我们看到垂直方向上的padding是生效了，并且不会撑开父元素。阿咧，但是第一个span元素的padding-top好像没有生效呢。。原因是设置垂直方向的padding没有影响元素的line-height，没有使整个元素下移显示 padding-top。我们改改代码就好了： 非替换元素设置padding-2.png
加了个div，padding-top正常显示了。

最后，试验一下设置替换元素的padding值：

替换元素设置padding

我们看到，替换元素设置的padding是生效的，并且撑开了父元素。

总结：
对于non-replace inline元素，设置垂直方向的margin是无效的，设置垂直方向的padding虽然元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。

第一次写博文，有啥地方说得不好希望大家评论告诉我。感谢观看到这里的各位。

继续刷题去了～～～