Here is a short overview how block-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
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