原文地址 [developer.mozilla.org](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model)
块级盒子（Block box） 和 内联盒子（Inline box）
如果一个盒子对外显示为 inline，那么他的行为如下:
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
补充: 内部和外部显示类型
在这里最好也解释下内部 和 外部 显示类型。如上所述， css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。
同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 正常文档流 布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).
但是，我们可以通过使用类似 flex 的 display 属性值来更改内部显示类型。 如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox ）规则进行布局，稍后您将了解这些规则。
注: 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅 Block and Inline Layout.
当你进一步了解 css 布局的更多细节的时候，你会了解到 flex， 和其他内部显示类型会用到的值，例如 [grid](/en-US/docs/Learn/CSS/CSS_layout/Grids)。
块级和内联布局是 web 上默认的行为 —— 正如上面所述， 它有时候被称为 正常文档流， 因为如果没有其他说明，我们的盒子布局默认是块级或者内联。
外边距，内边距，边框
外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
我们可以使用 margin属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：
-
margin-top注释：这个属性对于不可替换(non-replaced)的 inline 元素没有效果,比如 tt 或者 span。竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing。 -
margin-right注释:原文中的说明不对，应该是标错了位置。 -
margin-left注释：说明中的极少情况没有尝试出来。左右被设置成 auto 会水平居中。
盒子模型和内联盒子
在下面的示例中，我们在一个段落中使用了<span>，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。
注释：内、外边距和边框只会推开水平方向上的其他元素，在垂直方向上内距和边框依然会被绘制但不会推开元素。