仅使用 CSS 在 HTML 元素之间添加空格

Question

我有几个相同的 HTML 元素一个接一个：

 <span>1</span>
<span>2</span>
<span>3</span>

我正在寻找 仅使用 CSS 在元素 之间 添加空间的最佳方法

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

此外：

• 请写下收据的浏览器兼容性

---

我不想使用 _任何额外的 HTML 标记_，例如

<span></span>  <span></span>  <span class="last_span"></span>

我不想使用表格。

我希望 CSS 自动定位第一个和最后一个跨度。

我不想使用 JavaScript。

_可选要求_：最后一个跨度不能是父标签的 最后一个子 标签，但它将是父标签的 _最后一个跨度_。 Span 之间没有任何其他标签。

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这样做的一个好方法是：

 span + span {
    margin-left: 10px;
}

每个 span 前面有一个 span （所以，每个 span 除了第一个）都会有 margin-left: 10px

这是对类似问题的更详细答案： Separators between elements without hacks

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只需使用边距或填充。

在您的特定情况下，您只能在第二个 --- 上使用 margin:0 10px <span> 。

这是一个不错的 CSS 3 解决方案 ( JSFiddle )：

 span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

自 Internet Explorer 9 起支持使用诸如 :nth-child() 、 :last-child 、 :first-of-type 等选择器的高级元素选择。

原文由 Simone 发布，翻译遵循 CC BY-SA 4.0 许可协议