Question

我有几个相同的HTML元素一个接一个地出现：

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

我正在寻找使用仅限CSS

在元素之间添加空间的最佳方式

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

此外：

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

更新

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

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

我不想使用表格

我希望CSS

自动定位第一个和最后一个范围

我不想使用javascript

可选要求：最后一个跨度可能不是父标记的最后一个，但它将是父标记的最后一个。 Spans之间没有任何其他标签。

Answer 1

这样做的好方法是：

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

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

以下是对类似问题的更详细解答：Separators between elements without hacks

Answer 2

只需使用保证金或填充。

在您的具体情况下，您只能在第二个margin:0 10px上使用<span>。

<强>更新

这是一个很好的CSS3解决方案（jsFiddle）：

span {
    margin: 0 10px;
}

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

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

自Internet Explorer 9以来，支持使用:nth-child()，:last-child，:first-of-type等选择器进行高级元素选择。

Answer 3

您可以利用span是内联元素

这一事实

span{
     word-spacing:10px;
}

但是，如果跨越

中有多个文字，此解决方案将会中断

Answer 4

这很容易。

您可以通过排除第一个元素来设置元素样式，只需一行代码：

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

并完成，没有类操作。

Answer 5

您可以这样写：

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

Answer 6

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

Answer 7

<span>是一个内联元素，所以你不能在它们之间留出间距而不会使它成为块级别。试试这个

水平

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

垂直

span{
    margin-bottom: 10px;
}

与所有浏览器兼容。

Answer 8

您应该将元素包装在容器中，然后使用新的CSS3功能，例如css grid，free course，然后使用为您的特定问题创建的grid-gap:value

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

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

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

Answer 10

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

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

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

Answer 11

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

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

参考文献：https://cssreference.io/

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

Answer 12

如果要对齐各种项目，并且希望在所有面上都具有相同的边距，则可以使用以下内容。不论类型如何，带有container的每个元素都将获得相同的周围空白。

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

如果您希望将项目连续对齐，但是第一个元素触摸container的最左边缘，并且所有其他元素均等间距，则可以使用以下方法：

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}

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

12 个答案: