在css布局中，不同显示类型的元素遵循不同的盒模型规则，行内元素的margin设置无效是很多开发者刚接触布局时都会遇到的疑问，这背后是行内盒模型的特殊限制导致的。
行内盒模型的基本结构
css中所有元素都会生成一个或多个盒模型，行内元素生成的是行内盒，多个行内盒会在同一行内水平排列，直到行宽不足才会换行。行内盒的盒模型分为内容区、内边距、边框和外边距几个部分，但和块级盒的生效规则有明显区别。
我们可以通过一个简单的示例观察行内盒的基础表现：
<style>
.inline-box {
background: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
}
</style>
<span class="inline-box">第一个行内元素</span>
<span class="inline-box">第二个行内元素</span>
行内元素margin的生效限制
行内元素的margin生效规则分为水平方向和垂直方向两种情况：
水平方向margin
行内元素的水平方向margin（margin-left、margin-right）是可以正常生效的，会直接增加元素左右两侧和其他内容的间距，这也是很多开发者容易忽略的点，以为行内元素所有margin都无效。
垂直方向margin
行内元素的垂直方向margin（margin-top、margin-bottom）是无效的，不会增加元素上下方向的间距，也不会影响行框的高度。这是因为行内盒的垂直方向布局由行框的高度决定，行框高度由行内最高的盒子和基线位置决定，垂直margin不会参与行框高度的计算。
我们可以用代码验证垂直margin的无效性：
/* 给行内元素设置垂直margin，不会生效 */
span {
display: inline;
margin-top: 30px;
margin-bottom: 30px;
background: #e8f4ff;
}
为什么会有这样的限制
行内盒模型的设计初衷是为了适配文本流的布局，行内元素主要用于包裹文本片段，需要和文本一样在同一行内流动，垂直方向的间距如果由margin控制，会破坏文本行的连续性，也不符合文本排版的基本逻辑。因此css规范明确规定了行内非替换元素的垂直margin不会生效。
注意：行内替换元素（比如<img>、<input>等）的垂直margin是可以生效的，因为替换元素有自身的固有尺寸，不受文本行排版规则的完全限制。
让行内元素margin生效的解决方案
如果确实需要让行内元素的margin完全生效，有以下几种常用方案：
- 将行内元素转换为块级元素，使用
display: block，但会改变元素的排列规则，元素会独占一行 - 将行内元素转换为行内块元素，使用
display: inline-block，既保留行内排列的特性，又支持完整的盒模型规则 - 如果只是需要垂直方向间距，也可以给父元素设置行高或者使用padding替代垂直margin
以下是转换为行内块元素的示例代码：
/* 转换为行内块元素，margin全部生效 */
span {
display: inline-block;
margin: 20px;
background: #e8f4ff;
}
常见误区说明
很多开发者会把display: inline的元素设置垂直padding后看到背景区域扩大，就误以为垂直margin也会生效，实际上垂直padding虽然会显示背景，但同样不会增加行框的高度，也不会影响上下元素的间距，和垂直margin的表现逻辑是一致的。
另外如果行内元素被设置为浮动或者绝对定位，元素会脱离文档流，此时盒模型规则会遵循脱离文档流后的规则，margin也会正常生效，这属于特殊情况，不在常规行内盒模型的限制范围内。