HTML 个内联元素和 vertical/horizontal 个边距

Question

在 fiddle - http://jsfiddle.net/dddaaLwL/ 中，您可以看到水平边距对行内元素有影响。和垂直边距没有影响。这是正确的吗？为什么会这样？

#s1 {
margin-left: 40px;
}
#s2 {
margin-top: 40px;
}

Answer 1

是的，您的 fiddle 是正确的。为什么？

An inline element occupies only the space bounded by the tags that define the inline element.

更多信息HERE

---

内联元素示例:

<a>、<span>、<b>、<em>、<i>、<cite>、<mark> 和 <code>

更多关于内联元素

内联元素具有但不限于以下特征：

• 随着文本内容一起流动，因此
• 不会像块一样清除之前的内容掉到下一行 elements 以CSS
中的white-space设置为准
• 将忽略顶部和底部边距设置，但会应用左侧和 右边距和任何填充
• 将忽略宽度和高度属性
• 如果向左或向右浮动，将自动成为块级 元素，受所有块特性影响
• 以vertical-align为准属性

更多信息HERE

Answer 2

看看下面的jsfiddle

#s1 {
    margin-left: 40px;
}
#s2 {
    margin-top: 100px;
}

<span id="s1"> span 1 </span>
<br>
<br>
<span id="s2"> span 2 </span>
    
    <p id="s2"> p 3 </p>

p 和 div 元素是块级元素，其中 span 是内联元素，因此 span 上的边距不起作用。

Answer 3

实际上，垂直边距确实对行内元素有影响，但因为它上面的元素不是块，所以它实际上使用页面顶部的边距而不是前一个元素。让我们快速了解一下盒子模型：

因为 inline 元素处理边界的方式与 block 类型元素不同。它们只能容纳数据，和其他行内元素一样，它们遵循父元素的约束，只对其个体施加影响space.

但是，如果它们是 inline-block 个元素，您会看到不同的结果：

如您所见，inline-block 个元素实际上可以影响其他元素的行为，而 inline 个元素则不会。

另请参阅：

MDN Documentation on Inline Elements

MDN Documentation on Block-level Elements