Block Elements vs. Inline Elements

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

CSS

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

2 thoughts on “Block Elements vs. Inline Elements”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>