仅使用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; }