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 consists of 2 elements adjacent to each other and not divided by 50 pixels. What am I missing here?

Answer 1

select display: inline elements are default (usually) and will not respect fields. Change them to display: block if you want each one to be on a separate line or display: inline-block if you want everyone to have a large bottom margin.

EDIT: I see that you have <br> , so they will be on two separate lines with 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

Try this code:

HTML:

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

CSS

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