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

小开

只要使用边距或填充。

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

下面是一个不错的 CSS 3解决方案(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等)进行高级元素选择。

小开

<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 + span {
margin-left: 10px;
}

每个 span前面都有一个 span(因此，除了第一个以外，每个 span都有 margin-left: 10px)。

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

小开

你可以这样写:

span{
margin-left: 10px;
}


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

小开

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

span{
word-spacing: 10px;
}

但是，如果范围内有多个文本单词，则此解决方案将中断。

小开

你可以排除第一个元素来设计元素的样式，只需要一行代码:

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

没有必要改变任何类。

小开

或者，与其设置边距然后覆盖它，你可以直接用下面的组合正确地设置它:

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


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

小开

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

小开

您应该将元素包装在一个容器中，使用新的 CSS 3特性，如 CSS 网格、免费的课程，然后使用针对特定问题创建的 grid-gap:value。

span{
border: 1px solid red;
}
.inRow{
display: grid;
grid-template-columns: repeat(auto-fill, auto);
grid-gap: 10px /* This adds 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>

小开

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

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

一个很好的参考: CSS Reference-一个免费的 CSS 视觉指南

浏览器兼容性: 浏览器对 CSS 网格布局的支持

小开

如果您想对齐不同的项目，并且希望所有边都有相同的边距，可以使用以下方法。container中的每个元素，无论类型如何，都将获得相同的周围边距。

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

如果您希望对齐一行中的项目，但是让第一个元素接触 container的最左边缘，并且让所有其他元素保持等间距，您可以使用以下方法:

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