对于一个行内元素，设置它的 margin 会有什么表现，为什么它是可行的
答：设置 margin-left 和 margin-right 有影响，而 margin-top 和 margin-bottom 无影响。
行内元素设置 margin 会有位置的改变吗
答：左右 margin 会变，上下 margin 不会变。
解读
以上两个问题均涉及到了 margin 的一些细节，先来看以下结论：
🚩 行内元素中，padding-left / padding-right / margin-left / margin-right 有影响结果；
🚩 行内元素中，padding-top / padding-bottom / margin-top / margin-bottom 不影响结果；
🚩 padding-top / padding-bottom 虽然不影响结果，但实际上生效了。
啥意思呢，我们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* span {
padding: 10px;
margin: 50px;
background-color: red;
} */
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>外层上 div</div>
<!-- <span>我是内联元素</span> -->
<div>外层下 div</div>
</body>
</html>在 code_1.html 中，我们设置了两个 div，背景为黄色，运行结果如下图所示。
这时，在 code_2.html 中，我们在两个 div 之间，加一个内联元素 span，并设置 padding 和 margin，运行结果为下面这样：
仔细看这个图，先尝试自己理解一下为什么会变成这样。
我们分两步来进行理解：
第一步，当没有 background-color: red 时，结果是 span 向右移动了 的距离，即：
padding-left / padding-right / margin-left / margin-right影响了结果padding-top / padding-bottom / margin-top / margin-bottom不影响结果
第二步，加上 background-color: red 后，我们发现其实 padding-top / padding-bottom 生效了，不过还是没影响到结果；而 margin-top / margin-bottom 没有生效。
为什么会出现上述情况
答：<span> 是 不可替换元素 (non-replaced element)，而 行内不可替换元素的外边距不会改变该元素的行高。
解读
答案中有三个关键词，我们将对其分别解释：
- 行内
- 非替换元素
- 行高
1. 块级元素（block-level）和行内元素（inline-level）
HTML（超文本标记语言，Hypertext Markup Language）元素大多数都是块级元素或行内元素。
它们的区别在于：默认情况下，块级元素会新起一行。
所有的块级元素:
