CSS Inline and Block Elements

Block level elements will start a new line and will stack on top of each other. Block elements by default are:

  • paragraphs
  • headings
  • lists and list items
  • divs
  • header
  • footer
  • main
  • section
  • and more.

Inline elements stay in an existing line. A good way to remember inline elements is to think about links. You know links, they stay inside the text and they don’t have their own line (unless you purposefully make it so). Inline elements are:

  • links
  • strong
  • em
  • span
  • images

Inline Element Quirks

Only inline elements can be nested inside inline elements. For example putting a link inside a strong or span element.

They don’t respect height and margin, padding, and borders on the top and the bottom. So you can expect them to work only on the left and right side. Padding will work to a degree (the box will be bigger), but elements around it will ignore it. This behavior is often manifested by a box covering surrounding elements.

The following two tabs change content below.

jay

Latest posts by jay (see all)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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