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; 
}