blocks|key|2924736|text|只需使用边距或填充即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2924737|在您的特定情况下，只能在第二个上使用margin:0+10px。|offset|length|style|CODE|2924738|更新|BOLD|2924739|这里有一个很好的CSS3解决方案(jsFiddle)：|2924740|span+{
++++margin:+0+10px;
}

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

span:last-of-type+{
++++margin-right:+0;
}|code-block|syntax|javascript|2924741|从Internet+Explorer9开始，支持使用:nth-child()、:last-child、:first-of-type等选择器进行高级元素选择。|2924742|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Simo990/dTmy6/1/^0|0|F|6|O|D|0|0|2|0|H|8|0|0|0|Q|C|13|B|1F|E|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@$D|18|E|19|F|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]]|A|$]]|$1|M|3|N|5|O|7|1E|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1F|8|@$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]|$D|1K|E|1L|F|G]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

Just use margin or padding.

In your specific case, you could use <code>margin:0 10px</code> only on the 2nd <code>&lt;span&gt;</code>.

UPDATE

Here's a nice CSS3 solution (<a href="http://jsfiddle.net/Simo990/dTmy6/1/" rel="noreferrer">jsFiddle</a>): 

<pre><code>span {
 margin: 0 10px;
}

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

span:last-of-type {
 margin-right: 0;
}
</code></pre>

Advanced element selection using selectors like <code>:nth-child()</code>, <code>:last-child</code>, <code>:first-of-type</code>, etc. is supported since Internet Explorer 9.

blocks|key|250606|text|是一个内联元素，所以你不能在它们上面设置间距，除非它是块级的。尝尝这个|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|250607|水平|250608|span{
++++margin-right:+10px;
++++float:+left;
}|code-block|syntax|javascript|250609|垂直|250610|span{
++++margin-bottom:+10px;
}|250611|兼容所有浏览器。|250612|entityMap^0|0|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

<code>&lt;span&gt;</code> is an inline element so you cant make spacing on them without making it block level.
Try this

Horizontal

<pre><code>span{
 margin-right: 10px;
 float: left;
}
</code></pre>

Vertical

<pre><code>span{
 margin-bottom: 10px;
}
</code></pre>

Compatible with all browsers.

blocks|key|249297|text|span.middle+{
++++margin:+0+10px+0+10px;+/*top+right+bottom+left+*/
}

text+<span+class="middle">text+text|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|249298|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

&lt;span&gt;text&lt;/span&gt; &lt;span class="middle"&gt;text&lt;/span&gt; &lt;span&gt;text&lt;/span&gt;
</code></pre>

blocks|key|247680|text|这样做的一个好方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247681|span+%2B+span+{
++++margin-left:+10px;
}|code-block|syntax|javascript|247682|每个前面有span的span+(因此，除了第一个span之外的每个span)都会有margin-left:+10px。|offset|length|style|CODE|247683|这里有一个类似问题的更详细的答案：Separators+between+elements+without+hacks|247684|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7729566/separators-between-elements-without-hacks/7729610#7729610^0|0|0|5|4|A|4|O|4|X|4|15|H|0|H|15|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]|$I|13|J|14|K|L]|$I|15|J|16|K|L]|$I|17|J|18|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

A good way to do it is this:

<pre><code>span + span {
 margin-left: 10px;
}
</code></pre>

Every <code>span</code> preceded by a <code>span</code> (so, every <code>span</code> except the first) will have <code>margin-left: 10px</code>.

Here's a more detailed answer to a similar question: <a href="https://stackoverflow.com/questions/7729566/separators-between-elements-without-hacks/7729610#7729610">Separators between elements without hacks</a>

blocks|key|245739|text|你可以这样写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|245740|span{
+margin-left:10px;
}
span:first-child{
+margin-left:0;
}|code-block|syntax|javascript|245741|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can write like this:

<pre><code>span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}
</code></pre>

blocks|key|247686|text|您可以利用span是内联元素这一事实|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|247687|span{
+++++word-spacing:10px;
}|code-block|syntax|javascript|247688|但是，如果您的范围中有多个文本单词，则此解决方案将中断|247689|entityMap^0|5|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You can take advantage of the fact that <code>span</code> is an inline element

<pre><code>span{
 word-spacing:10px;
}
</code></pre>

However, this solution will break if you have more than one word of text in your span

blocks|key|2924778|text|您可以在一行代码中使用排除第一个元素的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2924779|span+~+span+{
++++padding-left:+10px;
}|code-block|syntax|javascript|2924780|不需要更改任何类。|2924781|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can style elements with excluding first one, just in one line of code:
<pre><code>span ~ span {
 padding-left: 10px;
}
</code></pre>
No need to change any classes.

blocks|key|247699|text|或者，不用设置边距，然后覆盖它，您可以使用以下组合立即正确地设置它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|247700|span:not(:first-of-type)+{
++++margin-left:++5px;
}

span:not(:last-of-type)+{
++++margin-right:+5px;
}|code-block|syntax|javascript|247701|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Or, instead of setting margin and than overriding it, you can just set it properly right away with the following combo:

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

span:not(:last-of-type) {
 margin-right: 5px;
}
</code></pre>

blocks|key|3139069|text|span:not(:last-child)+{
++++margin-right:+10px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3139070|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>span:not(:last-child) {
 margin-right: 10px;
}
</code></pre>

blocks|key|2924807|text|您应该将元素包装在容器中，然后使用css+grid、free+course等新的CSS3特性，然后使用为特定问题创建的grid-gap:value|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2924808|​|2924809|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;
}|code-block|syntax|javascript|2924810|<div+class="inrow">
++1
++2
++3
</div>
<div+class="inColumn">
++4
++5
++6
</div>|2924811|2924812|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/complete-guide-grid/|1|https://cssgrid.io/^0|1N|E|H|8|0|Q|B|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]|$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]]]

You should wrap your elements inside a container, then use new CSS3 features like <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow noreferrer">css grid</a>, <a href="https://cssgrid.io/" rel="nofollow noreferrer">free course</a>, and then use <code>grid-gap:value</code> that was created for your specific problem

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="inrow"&gt;
 &lt;span&gt;1&lt;/span&gt;
 &lt;span&gt;2&lt;/span&gt;
 &lt;span&gt;3&lt;/span&gt;
&lt;/div&gt;
&lt;div class="inColumn"&gt;
 &lt;span&gt;4&lt;/span&gt;
 &lt;span&gt;5&lt;/span&gt;
 &lt;span&gt;6&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

blocks|key|3139095|text|将这些规则添加到父容器中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3139096|display:+grid
grid-auto-flow:+column
grid-column-gap:+10px|code-block|syntax|javascript|3139097|很好的参考：https://cssreference.io/|offset|length|3139098|浏览器兼容性：https://gridbyexample.com/browsers/|3139099|entityMap|0|LINK|mutability|MUTABLE|url|https://cssreference.io/|1|https://gridbyexample.com/browsers/^0|0|0|6|O|0|0|7|Z|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

add these rules to the parent container:

<pre><code>display: grid
grid-auto-flow: column
grid-column-gap: 10px
</code></pre>

Good reference: <a href="https://cssreference.io/" rel="noreferrer">https://cssreference.io/</a>

Browser compatibility: <a href="https://gridbyexample.com/browsers/" rel="noreferrer">https://gridbyexample.com/browsers/</a>

blocks|key|250698|text|如果你想要对齐不同的项目，并且你希望所有的边都有相同的边距，你可以使用以下方法。每个具有container的元素，无论其类型如何，都将获得相同的周围边距。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|250699|​|250700|📷|atomic|250701|250702|.container+{
++display:+flex;
}
.container+>+*+{
++margin:+5px;
}|code-block|syntax|javascript|250703|如果您希望对齐行中的项目，但让第一个元素接触container的最左侧边缘，并使所有其他元素的间距相等，则可以使用以下命令：|250704|250705|250706|250707|.container+{
++display:+flex;
}
.container+>+:first-child+{
++margin-right:+5px;
}
.container+>+*:not(:first-child)+{
++margin:+5px;
}|250708|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3576b283f23e51c8396fc7dac1f374d5.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/9d523f1bf7e6484de19a391eaa801472.png^0|18|9|0|0|0|1|0|0|0|0|M|9|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|K|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1H|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|S|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|T|3|I|5|J|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|U|3|G|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|V|3|W|5|N|7|1R|8|@]|D|@]|E|$O|P]]|$1|X|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14|15|-4]]|16|$5|10|11|12|E|$13|17|15|-4]]]]

If you want to align various items and you like to have same margin around all sides, you can use the following. Each element withing <code>container</code>, regardless of type, will receive the same surrounding margin.

<a href="https://i.stack.imgur.com/h3MyX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h3MyX.png" alt="enter image description here"></a>

<pre><code>.container {
 display: flex;
}
.container &gt; * {
 margin: 5px;
}
</code></pre>

If you wish to align items in a row, but have the first element touch the leftmost edge of <code>container</code>, and have all other elements be equally spaced, you can use this:

<a href="https://i.stack.imgur.com/qdV2K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qdV2K.png" alt="enter image description here"></a>

<pre><code>.container {
 display: flex;
}
.container &gt; :first-child {
 margin-right: 5px;
}
.container &gt; *:not(:first-child) {
 margin: 5px;
}
</code></pre>

I have several same HTML elements going one after another:

<pre><code>&lt;span&gt;1&lt;/span&gt;
&lt;span&gt;2&lt;/span&gt;
&lt;span&gt;3&lt;/span&gt;
</code></pre>

I'm looking for the best way of adding space BETWEEN the elements using CSS only

<pre><code>[no space] [1] [space 10px] [2] [space 10px] [3] [no space]
</code></pre>

Additionally:

<ul>
<li>Please write down browser compatibility of your receipts</li>
</ul>

<hr>

UPDATE

It looks like I was unclear. I don't want to use ANY ADDITIONAL HTML MARKUP like

<pre><code>&lt;span&gt;&lt;/span&gt; &lt;span&gt;&lt;/span&gt; &lt;span class="last_span"&gt;&lt;/span&gt;
</code></pre>

I don't want to use tables

I want the first and last span to be targeted automatically by CSS

I don't want to use 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.

Add space between HTML elements only using CSS

容器

我有几个相同的HTML元素相继出现：123我正在寻找使用CSS only在元素之间添加间距的最佳方法[no space] [1] [space 10px] [2] [space 10px] [3] [no space]此外：请记下...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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