What is the difference between display:inline vs display:block in CSS

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.

Inline elements:

• respect left & right margins and padding, but not top & bottom
• cannot have a width and height set
• allow other elements to sit to their left and right.

Block elements:

• respect all of those
• force a line break after the block element
• acquires full-width if width not defined

Inline-block elements:

• allow other elements to sit to their left and right
• respect top & bottom margins and padding
• respect height and width

Compare table:

#css #css3 #stylesheet