仅使用 CSS 在 HTML 元素之间添加空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8184958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add space between HTML elements only using CSS
提问by Dan
I have several same HTML elements going one after another:
我有几个相同的 HTML 元素一个接一个：
<span>1</span>
<span>2</span>
<span>3</span>
I'm looking for the best way of adding space BETWEEN the elements using CSS only
我正在寻找仅使用CSS在元素之间添加空间的最佳方法
[no space] [1] [space 10px] [2] [space 10px] [3] [no space]
Additionally:
此外：
- Please write down browser compatibility of your receipts
- 请写下收据的浏览器兼容性
UPDATE
更新
It looks like I was unclear. I don't want to use ANY ADDITIONAL HTML MARKUP like
看来我说不清楚。我不想使用任何附加的 HTML 标记，例如
<span></span> <span></span> <span class="last_span"></span>
I don't want to use tables
我不想使用表格
I want the first and last span to be targeted automatically by CSS
我希望 CSS 自动定位第一个和最后一个跨度
I don't want to use javascript
我不想使用 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.
可选要求：last span 可以不是父标签的 LAST CHILD，但它将是父标签的 LAST SPAN。Span 之间没有任何其他标签。
回答by thirtydot
A good way to do it is this:
这样做的一个好方法是：
span + span {
margin-left: 10px;
}
Every spanpreceded by a span(so, every spanexcept the first) will have margin-left: 10px.
每个span前面都有一个span（所以，span除了第一个之外的每个）都会有margin-left: 10px.
Here's a more detailed answer to a similar question: Separators between elements without hacks
这是对类似问题的更详细的回答：Separators between elements without hacks
回答by Simone
Just use margin or padding.
只需使用边距或填充。
In your specific case, you could use margin:0 10pxonly on the 2nd <span>.
在您的特定情况下，您只能使用margin:0 10px2nd <span>。
UPDATE
更新
Here's a nice CSS3 solution (jsFiddle):
这是一个不错的 CSS3 解决方案（jsFiddle）：
span {
margin: 0 10px;
}
span:first-of-type {
margin-left: 0;
}
span:last-of-type {
margin-right: 0;
}
Advanced element selection using selectors like :nth-child(), :last-child, :first-of-type, etc. is supported since Internet Explorer 9.
高级元素选择使用选择喜欢:nth-child()，:last-child，:first-of-type等因为Internet Explorer 9的支持。
回答by reddtoric
add these rules to the parent container:
将这些规则添加到父容器：
display: grid
grid-auto-flow: column
grid-column-gap: 10px
Good reference: https://cssreference.io/
很好的参考：https: //cssreference.io/
Browser compatibility: https://gridbyexample.com/browsers/
浏览器兼容性：https: //gridbyexample.com/browsers/
回答by Angie
That's so easy.
那太容易了。
You can style elements with excluding first one, just in one line of code:
您可以在一行代码中设置不包括第一个元素的样式：
span ~ span {
padding-left: 10px;
}
and done, with no class manipulating.
并完成，没有类操作。
回答by Ben
You can take advantage of the fact that spanis an inline element
您可以利用span内联元素这一事实
span{
word-spacing:10px;
}
However, this solution will break if you have more than one word of text in your span
但是，如果您的跨度中有多个文本单词，则此解决方案将中断
回答by Vladyslav Savchenko
span:not(:last-child) {
margin-right: 10px;
}
回答by sandeep
You can write like this:
你可以这样写：
span{
margin-left:10px;
}
span:first-child{
margin-left:0;
}
回答by Moe Sweet
<span>is an inline element so you cant make spacing on them without making it block level.
Try this
<span>是一个内联元素，因此您不能在不使其成为块级的情况下对它们进行间距。尝试这个
Horizontal
水平的
span{
margin-right: 10px;
float: left;
}
Vertical
垂直的
span{
margin-bottom: 10px;
}
Compatible with all browsers.
兼容所有浏览器。
回答by jalooc
Or, instead of setting margin and than overriding it, you can just set it properly right away with the following combo:
或者，您可以使用以下组合立即正确设置，而不是设置边距而不是覆盖它：
span:not(:first-of-type) {
margin-left: 5px;
}
span:not(:last-of-type) {
margin-right: 5px;
}
回答by John Balvin Arias
You should wrap your elements inside a container, then use new CSS3 features like css grid, free course, and then use grid-gap:valuethat was created for your specific problem
您应该将元素包装在容器中，然后使用新的 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>