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

I have several same HTML elements going one after another:

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

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

I'm looking for the best way of adding space BETWEEN the elements using CSS only

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

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

Additionally:

另外:

• Please write down browser compatibility of your receipts
• 请写下您收据的浏览器兼容性

---

UPDATE

更新

It looks like I was unclear. I don't want to use ANY ADDITIONAL HTML MARKUP like

看起来我不太清楚。我不想使用任何额外的HTML标记

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

I don't want to use tables

我不想用表格

I want the first and last span to be targeted automatically by CSS

我希望第一个和最后一个span是由CSS自动定向的。

I don't want to use javascript

我不想用javascript

Optional requirement: last span can be NOT LAST CHILD of the parent tag, but it will be the LAST SPAN of the parent tag. Spans do not have any other tags between them.

可选需求:最后的跨度不能是父标记的最后一个子，但它将是父标记的最后一段。span之间没有任何其他标记。

10 个解决方案

#1

A good way to do it is this:

一个很好的方法是:

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

Every span preceded by a span (so, every span except the first) will have margin-left: 10px.

每个跨度之前都有一个span(因此，除了第一个span之外的每个span)都将有margin-left: 10px。

Here's a more detailed answer to a similar question: Separators between elements without hacks

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

#2

Just use margin or padding.

只需要使用边距或边距。

In your specific case, you could use margin:0 10px only on the 2nd <span>.

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

UPDATE

更新

Here's a nice CSS3 solution (jsFiddle):

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

span {
    margin: 0 10px;
}

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

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

Advanced element selection using selectors like :nth-child(), :last-child, :first-of-type, etc. is supported since Internet Explorer 9.

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

#3

You can take advantage of the fact that span is an inline element

您可以利用span是一个内联元素的事实。

span{
     word-spacing:10px;
}

However, this solution will break if you have more than one word of text in your span

但是，如果您的span中有多个文本单词，这个解决方案就会失效

#4

That's so easy.

这是如此简单。

You can style elements with excluding first one, just in one line of code:

您可以使用不包括第一个元素的样式，只需在一行代码中:

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

and done, with no class manipulating.

并且完成了，没有类操作。

#5

You can write like this:

你可以这样写:

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

#6

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

#7

<span> is an inline element so you cant make spacing on them without making it block level. Try this

是一个内联元素，所以你不能在它们之间进行间隔，而不需要使它块级。试试这个

Horizontal

水平

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

Vertical

垂直

span{
    margin-bottom: 10px;
}

Compatible with all browsers.

兼容所有浏览器。

#8

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

#9

Or, instead of setting margin and than overriding it, you can just set it properly right away with the following combo:

或者，你可以用下面的组合来正确设置它，而不是设置裕度，而不是覆盖它。

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

#10

You should wrap your elements inside a container, then use new CSS3 features like css grid, free course, and then use grid-gap:value that was created for your specific problem

您应该将您的元素封装到一个容器中，然后使用新的CSS3特性，比如css网格、free course，然后使用grid-gap:为您的特定问题创建的值。

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add 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>