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

Question

我有几个相同的 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 CHILD，但它将是父标签的 LAST SPAN。Span 之间没有任何其他标签。

score 310 · Accepted Answer

这样做的一个好方法是：

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

每个span前面都有 a span（所以，span除了第一个之外的每个）都会有margin-left: 10px.

这是对类似问题的更详细答案：Separators between elements without hacks

score 37 · Accepted Answer

只需使用边距或填充。

在您的具体情况下，您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;
}

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

score 31 · Accepted Answer

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

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

很好的参考：https ://cssreference.io/

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

score 19 · Accepted Answer

您可以在一行代码中设置不包括第一个元素的样式：

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

无需更改任何课程。

score 12 · Accepted Answer

您可以利用span作为内联元素的事实

span{
     word-spacing:10px;
}

但是，如果您的跨度中有多个文本单词，则此解决方案将中断

score 7 · Accepted Answer

7

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

于 2014-12-11T08:13:24.367 回答

score 3 · Accepted Answer

3

你可以这样写：

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

于 2011-11-18T16:07:21.937 回答

score 2 · Accepted Answer

<span>是一个内联元素，所以你不能在不使其成为块级别的情况下在它们上设置间距。试试这个

水平的

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

垂直的

span{
    margin-bottom: 10px;
}

兼容所有浏览器。

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

您应该将元素包装在容器中，然后使用新的 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>

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

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

12 回答 12

Related

Reference