margin property not working with select element in css

Question

I have this code:

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

in css

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

The output is 2 select elements adjacent to each other and not seperated by 50px. What am I missing here?

Answer 1

select elements are display: inline by default (generally) and will not respect margins. Change them to display: block if you want each to be on its own line, or display: inline-block if you want each to have a large bottom margin.

EDIT: I see you have the <br>, so they will be on two separate lines with display: inline-block as well.