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

我有几个相同的HTML元素接踵而来：

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

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

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

另外：

UPDATE

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

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

我不想使用表格

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

我不想使用JavaScript

可选要求：最后一个跨度可以不是父标记的最后一个子项，而是最后一个子标记的最后一个跨度。 跨度之间没有任何其他标签。

一个好办法是这样的：

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

每个span都有一个span （因此，除了第一个span之外的每个span ）都会有margin-left: 10px 。

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

只需使用边距或填充。

在你的具体情况下，你可以在第二个<span>使用margin:0 10px 。

UPDATE

这是一个不错的CSS3解决scheme（ jsFiddle ）：

 span { margin: 0 10px; } span:first-of-type{ margin-left: 0; } span:last-of-type{ margin-right: 0; }

不幸的是，Internet Explorer 8和以前的版本不支持使用诸如:nth-child() :last-child ， :first-of-type等select器的高级元素select。

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

 span{ word-spacing:10px; }

但是，如果您的跨度中有多个文本字，此解决scheme将会中断

太容易了

您可以使用排除第一个元素的元素进行样式设置，只需在一行代码中：

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

做完了，没有课堂操纵。

你可以这样写：

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

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

<span>是一个内联元素，所以你不能在它们之间进行间隔，而没有使它成为块级别。尝试这个

横

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

垂直

 span{ margin-bottom: 10px; }

兼容所有浏览器。

 span.middle { margin: 0 10px 0 10px; /*top right bottom left */ } <span>text</span> <span class="middle">text</span> <span>text</span>

或者，不要设置保证金而是覆盖它，您可以使用以下组合立即正确设置它：

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