Menu
I am styling an <input type="text"> element. I would like to let it have display:inline;. I did this by targeting this element in the last line of the css file that is called last. For some reason the element doesn't take over the display:inline; property (see Firebug image below).
How is it even possible?
263
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
Display values do not inherit. Setting display: inherit makes all children of the body block-level elements, since the body has display: block . The initial value of display is inline .
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Because your input element is floated left, the computed value of display is set to block according to the CSS specification.
Reference: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Comment
I would not expect that using the !important declaration would over ride the computed value.
64
I had this structure:
<div class="parent">
<input type="checkbox"/>
<label>Some awesome label</label>
</div>
div.parent was set as display: flex and it caused input and label to inherit display: block. It took me while to find the cause but changing that the parent div to display: block resolved the situation.
36
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
