Class 3 – Block vs. Inline Elements

Posted: July 15th, 2009 | Author: | Filed under: css, xhtml | Tags: | No Comments »
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 block 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
  • form

Common “inline” tags:

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

Other display types

Note: In reality, the browsers internally use more than just these two display properties to generate the layout behavior of elements on the page.  There are varieties of each of them for elements with special layouts, like table cells, list items, etc.  However, it is useful to generalize all elements into one of these two types to simplify how we code, as well as to overcome browser inconsistencies in how they deal with some of the more specialized types of display.  For a full list of display types and information on browser support for each of them, see this Quirksmode.org page.

No related posts.

Leave a Reply