只使用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。

可选要求：最后一个可以不是父标签的最后一个子元素，但它将是父标签的最后一个。这些之间没有其他标签。

- Dan

---

也许你应该考虑使用表格。这取决于text中输入的数据是什么。 - Madara's Ghost

span 的数量是可变的吗？ - thirtydot

对于这样的问题，您应该始终指定所需的浏览器支持。“我需要IE7支持”将得到与“我只使用Chrome”完全不同的答案。 - thirtydot

@TimJoyce 如果他输入的数据是表格形式的，那么这就是首选。 - Madara's Ghost

@thirtydot 我不知道在IE6、IE7中曾经有可能实现这个。 - Dan

Answer 1

一个好的方法是这样的：

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

每个标签在前面有一个标签的情况下（也就是除了第一个标签），都会有margin-left: 10px的外边距。

以下是类似问题的更详细答案：在无需hack的情况下，在元素之间添加分隔符

- thirtydot

---

这是一个好的解决方案，但是如果你的容器跨越多行，它就会失败。 - Savas Vedova

它也适用于类，就像这样：.sidebar-img + .sidebar-text { margin-left: 40px; }。 - parsecer

当项目换行时，您应该如何处理？ - thdoan

@thdoan：这取决于你的布局等因素。你可以尝试类似于这个的东西。 - thirtydot

我更喜欢使用 grid 和 grid-gap 的 reddtoric 解决方案。 - Alex Salomon

Answer 2

只需使用margin或padding。

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

这里有一个不错的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

---

你的回答很好，Simone，但是你能否不手动指定最后一个 span 来解决这个问题？这应该是 CSS 的工作。 - Dan

这是一个不必要的hack，针对的是“word-spacing”属性：http://www.w3schools.com/cssref/pr_text_word-spacing.asp 查看Ben的回答。 - arieljuod

原帖想要在span之间添加空格，因此可以为内联元素提供解决方案，这里不需要使用margin/padding/first/last属性，这些只会增加复杂性。 - arieljuod

实际上，OP说他将使用span和div(这些都是块级元素)。如果您将div定义为内联元素，则您的解决方案仍然有效... - Simone

Answer 3

将这些规则添加到父容器中：

display: grid
grid-auto-flow: column
grid-column-gap: 10px

一个好的参考：CSS参考 - 一个免费的CSS可视化指南

浏览器兼容性：CSS Grid布局的浏览器支持情况

- reddtoric

---

grid-auto-columns="max-content" 可能会有帮助，它会使网格项的大小与内容匹配。此外，浏览器兼容性也不再是问题：https://caniuse.com/#feat=css-grid - Alex Salomon

应该采纳这个答案。我知道评论不是用来道谢的，但到现在我一直在使用“flex”布局，而这个“grid”布局使得从父容器本身开始就变得非常容易！为了不让它完全没用，我会加上以下有助于任何想要了解更多的参考资料链接：https://css-tricks.com/snippets/css/complete-guide-grid/ - Rohan Kumar

Answer 4

您可以在一行代码中排除第一个元素来设置样式：

span ~ span {
    padding-left: 10px;
}

没有必要更改任何类。

- Angie

---

这个完美地运作了。span + span 不起作用，但是 span ~ span 就像魔法一样！谢谢 - juliusmh

在我的情况下，我有几个跨度，其中一些可能不包含类“Showing”，所以我需要的是span.Showing ~ span.Showing而不是span.Showing + span.Showing。 ~是通用兄弟选择器，其中一个不需要直接跟随另一个。 - Eric

Answer 5

你可以利用 span 是一个内联元素的特性：

span{
     word-spacing: 10px;
}

然而，如果您的 span 中有多个单词的文本，则此解决方案将失败。

- Ben

Answer 6

span:not(:last-child) {
    margin-right: 10px;
}

- Vladyslav Savchenko

---

需要解释一下。 - Peter Mortensen

Answer 7

如果您想对齐各种项目并希望四周都有相同的边距，则可以使用以下方法。无论类型如何，container 中的每个元素都将获得相同的周围边距。

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

如果您想将一行中的项目对齐，但希望第一个元素接触到 container 的最左边缘，并且所有其他元素等间隔分布，您可以使用以下代码：

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}

- Stefan Zhelyazkov

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外背景信息可以提高其长期价值。 - β.εηοιτ.βε

Answer 8

你可以这样写：

span{
    margin-left: 10px;
}

span:first-child{
    margin-left: 0;
}

- sandeep

Answer 9

您应该将元素放置在容器中，使用新的CSS 3功能，如CSS网格、免费课程，然后使用为您特定问题创建的grid-gap:value。

span{
  border: 1px solid red;
}
.inRow{
  display: grid;
  grid-template-columns: repeat(auto-fill, auto);
  grid-gap: 10px /* This adds space between elements, only works on grid items */
}
.inColumn{
  display: grid;
  grid-template-rows: repeat(auto-fill, auto);
  grid-gap: 15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

- John Balvin Arias

---

我想使用CSS样式在div类的元素之间添加空格。我使用了你的示例来构建我的代码。效果非常好。谢谢！ - Estatistics

感谢您提供课程的参考！ - Nicolas Castro

Answer 10

<span>是内联元素，因此无法在它们上面进行间距设置，除非将其转换为块级元素。

尝试这个：

水平

span{
    margin-right: 10px;
    float: left;
}

垂直

span{
    margin-bottom: 10px;
}

它兼容所有浏览器。

- Moe Sweet