html - マージンプロパティがcssのselect要素で機能しない

Question

私はこのコードを持っています：

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

cssで

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

出力は、互いに隣接し、50pxで区切られていない2つの選択要素です。ここで何が欠けていますか？

Answer 1

select要素はdisplay: inlineデフォルトで（一般的に）、マージンを尊重しません。display: blockそれぞれを独自の線上にdisplay: inline-block配置する場合、またはそれぞれに大きな下マージンを持たせる場合は、これらをに変更します。

編集：私はあなたが持っているのを見る<br>ので、それらは同様に2つの別々の行になり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;
}