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
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
thanks for the great interactive demo! how does it work?
Thanks Marcel – Post is comming soon!