Inline vs Block-Level Elements (or, Why Your Images Won't Center)

You might've run into a peculiar problem when trying to align images on your page. You can't set the margins on an image, and as a result, you can't center-align it. (Neither of these are true, but I'll get into that later.) The reason why is an important distinction between elements that affects how your entire page lays out.

What is page flow?

Throughout this article, I'll be referring to a concept known as page flow. In an HTML document, page flow refers to the way elements are laid out on the page. Obviously, an element earlier in the document will appear before an element later in the document.

Other aspects of page flow are less obvious. Some elements will cause the normal flow of text to break, and create whitespace on your page. Others don't. This is the distinction between inline elements and block-level elements.

Block-level elements

Block-level elements will cause a line break and a certain amount of whitespace to appear around where the element is rendered. By default, block-level elements take up the entire width of their container and are as tall as their content.

Good examples of block-level element are the header elements, <h1> through <h6>. Using one of these elements will cause a break in the text and whitespace above, below, and especially around the text. Block-level elements can be quite capably styled, floated, or have their margins set.

Inline elements

Inline elements, on the other hand, don't cause a line break when they appear. They also only take up the amount of space between their opening and closing tags.

Good examples of inline elements include the <em> and <strong> tags. These can be used to emphasize certain bits of text in a paragraph without breaking the flow of the paragraph itself.

Inline elements are much more fiddly to align, however. Because they don't break text flow, you can't float or align them normally. Inline elements are pretty reliant on block-level ones to set important rendering characteristics or alignment properties.

So why the distinction?

You can think of block-level elements as being the building blocks of the page. Block-level elements create the rough outline, setting where things like the navbar or headers go, while inline elements fill in the details.

The distinction is also important when it comes to tag nesting. You can't nest a block-level element inside of an inline element, but the reverse is valid. (You can always have block-level inside block-level and inline inside inline, yes.)

Setting the display property and centering those images

One easy way to center an image is to use the text-align property. Confusingly, text-align works for all inline elements, and images are counted as inline. You'll need to set this on the container element, however—and that container has to be a block-level element.

My preferred method instead involves the display property. display allows you to set how an element will sit in the page flow. If set to block, inline elements will cause a line break just like block-level elements. If set to inline, block-level elements will be affected by text-align all the same.

By setting the display property on an image to block, you'll be able to set its margin—and thus, center-align it.

img {
	display: block;
	margin: auto; }

This method won't allow you to nest block-level elements inside inline ones, however. It only affects how the elements render in the page flow.