Class 3 – Block vs. Inline Elements

July 15th, 2009 § 0

The display property in CSS is responsible for what shape an element takes on the page and how an element aligns with the elements around it.  In general, all XHTML elements fall into one of two display categories: block or inline.
Block elements take up a rectangular shape, and take as much width as they can. They also break the flow of the page by introducing line breaks before and after themselves automatically.

Inline elements take the shape of whatever content is inside of them. They stretch to fit only the width of the content inside of them, not any more. And they do not break the flow of the page with automatic line breaks.

Here is an example file highlighting the shape differences between a div and a span. Divs are block elements, while spans are inline elements.  In fact, <divs> and <spans> are identical in all other ways except this difference.

It is possible to convert a blog element into an inline element and vice versa using CSS.  You simply adjust the display property of the element in the CSS.

Here is an example where we have converted an element that normally has a block display into one that has an inline display by overriding the default display setting in the CSS code.

Common “block” tags:

  • div
  • ul, ol, and li
  • h1 to h6
  • p
  • pre
  • table
  • blockquote
  • form

Common “inline” tags:

  • span
  • a
  • strong
  • em
  • img
  • br
  • input

No related posts.

Tagged:

§ Leave a Reply

What's this?

You are currently reading Class 3 – Block vs. Inline Elements at Web Development Intensive.

meta