Here is a short overview how block-elements and inline-elements react in the normal flow. You can try it yourself - just change the code inside the html and css boxes. The result appears in the output box.

Interactive Demo: Block vs. Inline

HTML

<div>Block Element 1</div> <div>Block Element 2</div> <span>Inline Element 1</span> <span>Inline Element 2</span>

CSS

div, span { background-color: #b6dedc; margin: 0.2em; }

OUTPUT:

Default properties of Block Elements:

• Occupy the full width available.
• Create a new line before and after the element.
• This means that the two divs in the example above are arranged below each other.

These elements are block elements: address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul, center, dir, isindex, menu

Default Properties of Inline Elements:

• Only occupy the width they need.
• Do not force a line-break.
• This means that the spans in the example above are displayed beneath each other.

These elements are inline elements: a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var basefont, font, s, u

Helpful Links

w3schools/block-elements