仅使用CSS在HTML元素之间添加空格 [英] Add space between HTML elements only using CSS

问题描述

我有几个相同的HTML元素：

I have several same HTML elements going one after another:

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

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

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

另外：

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

UPDATE

看起来我不清楚。我不想使用任何其他HTML标记（例如

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

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

我不想使用表格

我想通过CSS自动定位第一个和最后一个span

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

我不想使用javascript

I don't want to use 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 + span {
    margin-left: 10px;
}

每个 span 由 span （因此，每个 span 除了第一个）将有 margin-left： 10px 。

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

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

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

这篇关于仅使用CSS在HTML元素之间添加空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！