Menu
<div style="background-color:red"> <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div> </div> <div style="background-color:yellow"> <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div> </div>When rendered in FF or Chrome the height of the red div is 26px, whereas the height of the yellow div is 20px. How can I make the red div render the same as the yellow div, but without it containing any text?
247
Inline elements don't start in a new line. Block elements always start in a line. Inline elements allow other inline elements to sit behind. Block elements have top and bottom margin.
Even though the property says “text” align, it affects all elements inside the block-level element that are either inline or inline-block elements. The property only affects the content inside the element to which it is applied, and not the element itself.
Yeah it works but someone already provided the same solution.
just a thought:
as long as there's no text in the div, it's treated like a inline-image (or something else), and so it's vertical-align is set to 'baseline'(or text-bottom or whatever) instead of 'bottom'.
the solution:
to correct that, set vertical-align: bottom; on your inner divs. there's absolutely no need to put a space or invisible element into it, like others mentioned (but that would be an (ugly) solution, too)
196
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
