为何display: inline元素的margin/padding会生效？

你搞混了inline元素margin/padding生效的方向差异，W3Schools说的是「上下margin/padding不影响布局」，而不是完全不生效，具体细节：

• 左右方向的margin/padding：inline元素是完全生效的，会直接推开左右相邻的元素，这就是你测试代码里设置margin-left和padding-left能看到效果的原因。
• 上下方向的margin/padding：设置后，元素自身的背景、文本区域会被撑开，但不会改变整个文本行的高度，也不会推开上下的其他元素——简单说就是「自己变高了，但不影响周围布局」，这才是文档描述的「不被正常识别」的场景。

对比inline-block：它同时具备行内元素的排列特性和块级元素的盒模型特性，所以上下左右的margin/padding都会完全影响布局，设置上下值时，会直接推开上下的元素，改变整体布局结构。

你的测试代码刚好只验证了左右方向，所以才会和文档描述产生错觉，试试给两个类都加上margin-top: 20px; padding-top: 20px;，就能看到明显区别：inline元素的红色背景会往上超出父div，但上面的元素不会下移；而inline-block的蓝色背景会把整个div往下推，和上面的元素拉开距离。

测试代码：

.word-inline {
  display: inline;
  margin-left: 10px;
  padding-left: 10px;
  margin-top: 20px;
  padding-top: 20px;
  background-color: red;
}

.word-inline-block {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  margin-top: 20px;
  padding-top: 20px;
  background-color: blue;
}

<div>Next word is display <span class="word-inline">inline</span></div>
<div>Next word is display <span class="word-inline-block">inline-block</span></div>

内容的提问来源于stack exchange，提问作者Buzusima