元素之間的空間。如何避免間隔第一個項目？

我有4個文本字段，我試圖在它們之間創建10px的空間。我得到它的工作，但第一個項目也移動了10px，我不希望它。我想到最後3個文本字段的類，這將工作，但我仍然在尋找一個更好的主意。有什麼建議麼？元素之間的空間。如何避免間隔第一個項目？

HTML：

<span>text</span> 
<span>text</span> 
<span>text</span> 
<span>text</span>

CSS：

span { 
    margin:0 10px; 
}

來源

2016-12-24 Web O

添加類第一和最後一個項目，並使用這些類 –

使用:first-child僞選擇：

span:first-child { 
    margin: 0; 
}

:first-child選擇s（在這種情況下）第一個<span>即的第一個孩子它的父母（<body>）在我們的情況下，並將樣式應用於該元素只。 :last-child同樣適用，它將造型應用於父母的最後一個子女。

此外，使用:last-child選擇應該平分一切，請記住是對稱的，你必須申請保證金左，右元素以及，一個小例子：

span { 
 
    margin: 0 10px; 
 
} 
 

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

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

<span>text</span> 
 
<span>text</span> 
 
<span>text</span> 
 
<span>text</span>

來源

2016-12-24 14:02:06 Roberrrt

更改CSS：

span:first-child { 
    margin: 0; 
} 

span { 
    margin:0 10px; 
}

的:first-child僞選擇器將爲第一個span元素提供不同的邊距。

來源

2016-12-24 14:05:39 Jay

更好的解決方案，以避免margin的第一個元素是我們CSS的:not選擇，

的：沒有（選擇）選擇每一個元素是不是指定元素/選擇器相匹配。

離開第一跨度標籤，其他三個應該有margin-right和10pxmargin-left。我們可以用:not選擇這樣做：

span:not(:first-child) { 
 
    margin:0 10px; 
 
}

<span>text</span> 
 
<span>text</span> 
 
<span>text</span> 
 
<span>text</span>

來源

2016-12-24 14:10:53 frnt

或甚至結合他們'：not（：f irst-child）：不是（：last-child）'保存行:)。 – Roberrrt

是@Roberrrt，但這裏OP想要在第一個標籤上執行該操作:-) – frnt

另一種簡單的方法來排除第一個:)：

span + span { 
 
    margin:0 10px; 
 
}

<span>text</span> 
 
<span>text</span> 
 
<span>text</span> 
 
<span>text</span>

來源

2016-12-24 15:47:56

元素之間的空間。如何避免間隔第一個項目？

回答

相關問題