Menu
Do you know any good article on "When to use display:block when :inline and when :inline-block" and why?
and when we will have to override display:?? through css for any HTML tag/element?
362
It's useful when you want to have small blocks flowing left-to-right, top-to-bottom like regular text, but still have them like blocks. Note: in 90% of cases you don't need to specify the display property, just use appropriate elements with classes, like <strong> or <em> for inline, <div> or <p> for blocks.
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.
No need to clear floats anymore. Compared to display: inline , the major difference is that inline-block allows to set a width and height on the element.
“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).
inline - Treats the element as though it were an inline chunk of text. width and height are meaningless
block - Treats the element as as rectangle. width and height can be specified
inline-block - Flows a element inline with the text, but allows width and height to be specified.
Elements default to one of these anyway. For example:
<span>, <em>, <strong> -> inline
<div>, <p> -> block
190
quirksmode.org has a good explanation with screenshots:
http://www.quirksmode.org/css/display.html
35
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
