margin屬性在CSS

Question

我有這樣的代碼：

<div class= "foo"> 
<select >blablabl</select>;</br> 
<select >blablabl</select>; 
</div> 

在CSS

.foo select{ 
    margin-bottom:50px; 
} 

輸出是彼此相鄰的，而不是由50像素分隔2個選擇元件。我在這裏錯過了什麼？

Answer 1

select默認情況下（一般情況下）元素爲display: inline，並且不會考慮邊距。如果您希望每個都在自己的行上，請將它們更改爲display: block;如果您希望每個都有較大的底部邊距，則將它們更改爲display: inline-block。

編輯：我看到你有<br>，所以他們將與display: inline-block在兩條不同的線上。

Answer 2

<div class= "foo"> 
    <select >blablabl</select> 
    <select >blablabl</select> 
</div> 

在CSS

.foo select { 
    display: block; 
    margin-bottom: 50px; 
} 

Answer 3

試試這個代碼：

HTML：

<div class= "foo"> 
    <select ><option>blablabl</option></select>;</br> 
    <select ><option>blablabl</option></select>; 
</div> 

CSS：

.foo select{ 
    margin-bottom:50px; 
}