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

我有几个相同的HTML元素相继出现：

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

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

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

另外：

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

更新

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

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

我不想用桌子

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

我不想使用JavaScript

可选要求：last span可以不是父标记的LAST LAST LD，但是它将是父标记的LAST SPAN。跨度之间没有任何其他标签。

一个好的方法是：

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

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

这是一个类似问题的更详细的答案：元素之间的分隔符，没有hack

只需使用边距或填充。

在您的特定情况下，您margin:0 10px只能在2nd上使用<span>。

更新

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

span {
    margin: 0 10px;
}

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

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

高级元素选择使用选择喜欢:nth-child()，:last-child，:first-of-type等因为Internet Explorer 9的支持。

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

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

良好参考：https : //cssreference.io/

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

太简单了

您可以在一行代码中使用排除第一个元素的样式：

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

并完成，无需任何类操作。

您可以利用以下事实：span内联元素

span{
     word-spacing:10px;
}

但是，如果您的跨度中有多个文字，则此解决方案将失效

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

您可以这样写：

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

<span>是一个内联元素，因此您不能在它们之间留出间距而不会使其成为块级。试试这个

卧式

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

垂直

span{
    margin-bottom: 10px;
}

与所有浏览器兼容。

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

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>

或者，您可以使用以下组合直接设置适当的边距，而不是设置边距并覆盖它：

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

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

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

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

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

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

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

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