Menu
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?
817
This happens because the div has no border, and no padding defined, and the CSS specification states to collapse the two top margins into a single one of the parent. (The same happens with bottom margins.)
You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
The most common reason that the margin: auto; is not working might be that you have not set the width of the element. If you haven't set the width of the element and try applying margin: auto; , it will not work.
For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance. box-shadow can be used to add stroke to the element if really needed.
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.
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
