html - 边距属性不适用于css中的选择元素

Question

我有这个代码：

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

在 CSS 中

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

输出是 2 个彼此相邻且不相隔 50px 的选择元素。我在这里想念什么？

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>

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