Block vs. Inline Elements

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Prefatory notes

First of all, look at this little HTML document and its code (below):


    <title>My First HTML File</title>

    <p>This is a paragraph containing some
      <em>emphasised text</em> and a
      <a href="something.html">link to something</a>.

    <p>This paragraph contains an image:
      <img src="image.jpg" alt="An image"/>

    <p>This is another short paragraph.</p>


HTML documents work like boxes. You can take these boxes and put them inside each other. The largest box in every HTML document is the <html> element—everything has to be nested inside it.

Imagined as boxes, the above HTML document would look like this:

An HTML document, imagined as nested boxes

As you can see, the largest box is the <html> box, which contains the <head> and <body> boxes, which in turn contain yet more boxes. (Note that the structure is also reflected by the indentation in the code above.)

At a glance, you might also be able to tell that the “body”, i.e., the main part of the document, consists of three paragraphs of text, the first containing an emphasised phrase and a link, and the second an image.

Types of HTML elements

There are three different kinds of elements: block elements, inline elements, and elements that are not displayed.

The easiest to explain are the elements that are not displayed at all. As you can see in the above example, there are some elements that do not, by themselves, correspond to anything recognisable on the resulting HTML page; most notably, these would be <html>, <head>, and <body>. They are used to wrap the whole document in one large box, and to separate the different parts of the HTML document. By themselves, they don’t change the visible part of the page.

The <title> element is a special case of an element that is not displayed; it is used to set the title of the document, which is usually shown in the browser’s title bar or at the top of the open tab in a tabbed browsing environment. It is not shown on the web page itself.

Additional elements of this kind, which are not included in the above example, would be <link> or <meta> elements, or a <style> block, in the <head> of your document.

Block elements

Block elements are paragraph-level things. A block element creates its own dedicated space on the page: It starts on a new line, and whatever comes after it also starts on a new line. The paragraphs on this page are simple examples: Each of them gets its own “block”, and when one ends, the next one starts below it.

Common block elements include <p>, <div>, any headings (<h1> to <h6>), <hr/>, <table>, and <blockquote>.

A block element is as wide as its container, i.e., the “box” it has been put into. In the above example, the paragraphs are all contained directly inside the <body> and will thus be as wide as the displayed HTML page.

A block element’s height depends on its content; it is as high as it needs to be so that its content will fit into it.

Block elements can occur directly inside the <body>. They can, in general, contain other block elements (e.g., you can put <p> elements inside a <blockquote>), inline elements, and text.

N.B.: This section and the next one explain the rules for XHTML 1.0 Strict. In other flavours of (X)HTML, some of the rules are not enforced as strictly. It is, however, perfectly correct to adhere to them even in “transitional” versions of HTML.)

Inline elements

Inline elements are “smaller” elements that are contained inside block elements. They don’t create their own “blocks”; instead, they take up exactly as much space as they need so that their content will fit. They are as wide and as high as their content.

Common inline elements include <img/>, text formatting elements (<em>, <i>, <b>, etc.), links and anchors (<a>), <span>, and <br/>.

Unlike block elements, inline elements can be put next to each other—or next to ordinary text—on the same line. Look at the first paragraph (<p>) in the above example document: If the screen is wide enough, the whole text, including both the emphasised phrase and the link, will all end up on one line; if it isn’t, the paragraph’s content will re-flow to fit into the available space:

This is a paragraph containing some emphasised text and a link to something.

(Resize your browser window or change your font size to see the paragraph’s content, and the rest of this document, re-flow.)

Inline elements cannot be put directly inside the <body> of a document; they always have to be contained in a block element.

Another difference to block elements is that inline elements cannot contain block elements. They can, in general, only contain other inline elements and ordinary text. (There are further restrictions for specific elements. Self-closing elements such as an image (<img/>) or a line break (<br/>) cannot, for example, contain anything else.)

Why some elements won’t let you style them the way you want

Understanding the difference between block and inline elements is important for using CSS correctly and without frustrations.

As explained above, inline elements will always take up exactly as much space (both width and height) as they need. Thus, they do not really have either a width or a height of their own; they adapt to whatever happens to their “container”. If a paragraph (or any other block element) gets resized, its content re-flows, and all the displayed widths and heights of its contained elements can change.

If you set a width or height on an inline element, the browser will just ignore it. Here’s an example:

This is a paragraph containing two <span> elements: first span and second span; the second <span> is set to a width and height of 16em each, but that doesn’t change anything; it still takes up exactly the amount of space that its content needs—no more, no less.

An em is a typographical unit of measurement that means “about the width of the letter M”—so an element with a width and height of 16em each would be quite a large box. As you can see, however, the <span> is only as large as it needs to be for its text to fit inside it.

The same goes for margins at the top or bottom of inline elements:

Here is a <span> whose top and bottom margins are set to 4em each: a span. As you can see, it does not actually have those margins. Margins to the left and right of inline elements, however, work perfectly fine, since inline elements have “neighbours” to their left and right from which they can be set off. (As shown in the previous example, they do not have this kind of “neighbourhood” relationship to anything above or below them, since they can re-flow freely and might even span more than one line—making it very hard to imagine where or how the top and bottom margins should be applied.) Here’s an example of left and right margins:

This paragraph contains yet another <span>; its left and right margins are set to 4em each: a span. As you can see, this works. Finally, setting the “text-align” CSS property does not make any sense for inline elements either. You cannot meaningfully align text within a space that is exactly as large as the text itself.

Changing one element type to another

Using CSS, it is possible to change a block element to an inline element and vice versa. If you need to change the type of an element, you can use the “display” CSS property. There are quite a few different values for it, as listed by W3Schools, but the two that concern us the most in this context are “block” and “inline”—which do exactly what you would expect them to.

So if, for example, you needed to change paragraphs to display inline instead of as block elements, you would use the following CSS:

  display: inline;

N.B.: Changing element types is only rarely a good idea. If you aren’t sure what you’re doing, you might want to refrain from trying it in your e-books. A legitimate example for using the “display” CSS property can be found in the Case Study on Poetry.

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu