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

Jitendra Vyas picture Jitendra Vyas · Jun 15, 2010 · Viewed 11.8k times · Source

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

Eric picture Eric · Jun 15, 2010

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