Is there any guide on "When to use display:block when :inline and when :inline-block" and why?

Question

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?

Answer 1

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

Answer 2

quirksmode.org has a good explanation with screenshots:

http://www.quirksmode.org/css/display.html

Answer 3

By default a division displays as a block. This puts it on its own line and expands to fill its container. An inline element basically makes a division into a span (in its default state). You can't apply much anything to it anymore and it displays inline with any text. You can get a median between the two: inline-block. This allows more styling to be done on the division, including setting a width and height, but still displays the 'block' inline with the text, sort of like an image.

So, inline, inline-block, and block are more like levels of an element, each with certain styles that can/cannot be applied to the element.

Answer 4

The use cases for block and inline are pretty obvious. Use inline if you want to apply a style to a short span of text (e.g. a few words), and use block for rectangles areas with width/height.

As for inline-block, it's used naturally for images. 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 main way it comes into play is when hiding stuff with Javascript, you just need to revert the element to its original/natural display attribute.