仅使用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]

另外:

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

---

UPDATE

看起来我不清楚.我不想使用任何其他HTML MARKUP

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

我不想使用表格

我想要CSS自动定位第一个和最后一个跨度

我不想使用javascript

可选要求:最后一个span可以是父标记的最后一个CHILD,但它将是父标记的最后一个SPAN.Spans之间没有任何其他标签.

Answer 1

这样做的好方法是:

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

每个span前面都有一个span(所以,span除了第一个之外)都会有margin-left: 10px.

这里是一个类似问题的更详细的答案:没有黑客的元素之间的分隔符

Answer 2

只需使用边距或填充.

在您的具体情况下,您margin:0 10px只能在第二天使用<span>.

UPDATE

这是一个很好的CSS3解决方案(jsFiddle):

span {
    margin: 0 10px;
}

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

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

使用选择,如高级元素选择:nth-child(),:last-child,:first-of-type,等因为Internet Explorer 9的支持.

Answer 3

您可以利用span内联元素这一事实

span{
     word-spacing:10px;
}

但是,如果您的跨度中包含多个文本单词,则此解决方案将会中断

Answer 4

那太容易了.

您可以通过排除第一个元素来设置元素样式,只需在一行代码中:

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

并完成,没有类操纵.

Answer 5

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

Answer 6

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

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

良好参考：https : //cssreference.io/

浏览器兼容性：https : //gridbyexample.com/browsers/

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;
}