Search code examples
css

What is the difference between display:inline and display:block?

What is the basic difference between the following CSS:

display:inline

and this:

display:block

Using these separately on an element, I get the same result.

Solution

  • display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

    display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.

    Read more about display options : http://www.quirksmode.org/css/display.html