display:inline vs display:block [duplicate]

Solution 1:

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

Solution 2:

Block

Takes up the full width available, with a new line before and after (display:block;)

Inline

Takes up only as much width as it needs, and does not force new lines (display:inline;)