HTML内联元素和垂直/水平边距

Question

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

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

Answer 1

是的，你的小提琴是正确的。为什么呢？

  

内联元素仅占用由标签限定的空间   定义内联元素。

更多信息 HERE

<小时/> 内嵌元素的示例：

<a>，<span>，<b>，<em>，<i>，<cite>，<mark>和{{1} }

有关内嵌元素

的更多信息

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

• 与文本内容一起流动，因此
• 不会将以前的内容清除到下一行，如阻止 元素受CSS中的空白区域设置
• 将忽略顶部和底部边距设置，但将向左和向下应用 右边距和任何填充
• 将忽略宽度和高度属性
• 如果向左或向右浮动，将自动成为块级别 元素，受所有块特征的影响
• 受纵向对齐属性

更多信息HERE

Answer 2

实际上，垂直边距对内联元素有影响，但由于它上面的元素不是块，它实际上使用的是页面顶部的边距而不是前一个元素。让我们快速浏览一下盒子模型：

因为inline元素不像block类型元素那样处理边界。它们只能保存数据和其他内联元素，并且它们遵循父元素的约束，并且只对其各自的空间施加影响。

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

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

另见：

MDN Documentation on Inline Elements

MDN Documentation on Block-level Elements

Answer 3

看看下面的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是内联元素，因此跨度上的边距不起作用。