Learn distinctions between inline and block HTML elements

by Tony Patton | Jul 17, 2006 2:35:00 PM

Tags: Web browsers, CSS, Tony Patton, block element, Web browser, HTML, Web Development Zone Newsletter

Takeaway: When laying out and designing Web applications, it's important to know the distinctions between inline and block elements. Learn about both elements, and find out how you can use CSS to override an element's default behavior.

I had a lengthy discussion with a fellow developer the other day regarding inline and block Web page elements. The difference between inline and block HTML elements is an often misunderstood aspect of Web development, so I want to take a little time to cover each and note the differences between the elements.

How they are displayed

By default, HTML displays its elements in one of three ways:

Inline: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.
Block: New lines appear before and after the element with it consuming the full width available.
Hidden: There are some elements that never display within the browser window, such as meta tags and script and style sections.

A closer look at each display type follows.

Block

Some common block elements include the following:

The general purpose div container
Header elements, h1, h2, h3 and so forth
Paragraph (<p>)
Tables (<table>)
Forms (<form>)
Lists, both unordered (ul) and ordered (ol) along with contained items

A good way to get a feel for the behavior of a block element is to see an example that uses CSS to show the block element's area of a page. The simple HTML page in Listing A sets the background color for the contained elements to demonstrate how and where they show up on the page.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

This example provides a good visual clue on the behavior of block-level elements. The browser defines the default spacing around block-level elements. This means you'll need to test (and test some more) page presentation in various browsers to get a feel for how spacing (among other things) is handled. The spacing depends on the particular element and an individual browser's default settings. You can use CSS to wrestle control of elements, but then again browsers react differently. You may opt to utilize inline elements, so let's take a look at them.

Inline

There is no break of the page flow with inline elements; that is, they fit in with other elements and do not feature bookend line breaks (although you can certainly insert them). Here are a few common inline elements:

Anchor tags using <a>
The inline version of the div tag�the span element
Any text decoration tags like <strong> (although you should employ CSS when possible)
The line break <br> is inline
Form input tags

Listing B provides a visual clue of the behavior of inline elements. Inline elements have been added to the block element example to showcase their behavior both on the page and within block containers.

One thing you may notice is the lack of any display for the line-break element, but it doesn't consume any screen space so there is nothing to display. Basically, the inline elements display in the line where they are placed.

You may think this is a no-brainer, but the distinction between inline and block elements is important when laying out and designing Web applications. You must understand the behavior of elements to correctly place and combine them on the page. You can easily override an element's default behavior with CSS and the display property.

CSS override

The CSS display property provides a magic wand to the Web developer. It allows you to quickly change an element's behavior from inline to block and vice versa. The next example alters the behavior of each element from the previous example. The display property is added to each CSS definition for every HTML element on the page. It has the following syntax:

display: block | inline | list-item |
none

Right now, we are solely interested in the block and inline values, so the example in Listing C changes default block elements to inline and inline to block.

You'll notice that the items contained by paragraph, header, and div elements now appear on the same line. Also, the span element now appears with line breaks before and after it within the div tag, which does not include them. The individual list items within the unordered list now appear on their own line.

The display property may seem simple, but it is very powerful because it puts control of display behavior in your hands. I must reiterate the importance of testing and retesting to ensure expected behavior in all supported browsers.

The display property's none value is also invaluable because it allows you to easily negate an item's display behavior by totally hiding it from view. This is often combined with JavaScript to control presentation of page elements like menus and so forth.

Know your elements

This simple design issue is often overlooked or misunderstood by Web developers. The knowledge of block and inline behavior and which page elements belong to each group allows you to better understand how a page is displayed (or why something is appearing a certain way). CSS provides powerful veto power with the display property�allowing you to override an element's default display behavior.