Controlling Element Display: Inline, Inline-Block, and Block

Understanding Element Display in HTML and CSS

In HTML and CSS, the display property controls how an element is rendered on the page. Understanding the different values of this property is crucial for creating well-structured and visually appealing layouts. This tutorial will focus on three primary display values: block, inline, and inline-block.

The Default: Block Display

By default, most HTML elements (like <div>, <p>, <h1>, etc.) are displayed as block elements. Block elements take up the full width available to them and start on a new line. They respect width and height properties, and can contain other block or inline elements.

Think of block elements as building blocks stacked on top of each other. Each block occupies its own "line" or space.

Making Elements Inline

Inline elements do not take up the full width available to them. They flow within the text content, and only take up as much width as necessary. Unlike block elements, inline elements do not start on a new line, and they ignore width and height properties. Margin and padding apply horizontally, but vertical margin and padding may not always behave as expected.

Common inline elements include <span>, <a>, <img>, and <strong>.

To make a <div> (which is normally a block element) display inline, use the following CSS:

div {
  display: inline;
}

This will cause multiple <div> elements to appear on the same line, similar to words in a sentence. However, setting display:inline on a div is often not the best approach, as it can limit your styling options.

The Best of Both Worlds: Inline-Block

The inline-block display value combines characteristics of both inline and block elements. Elements with display: inline-block; are placed inline like inline elements, but you can set both width and height, as well as all margins and padding, like block elements.

This provides a great deal of flexibility when creating layouts where you want elements to flow inline but still have precise control over their dimensions and spacing.

div {
  display: inline-block;
}

Example:

Consider the following HTML:

<div>foo</div>
<div>bar</div>
<div>baz</div>

With display: block; (the default):

The elements will stack vertically:

foo
bar
baz

With display: inline;:

The elements will appear on the same line:

foo bar baz

However, you won’t be able to set a specific width or height on the <div> elements.

With display: inline-block;:

The elements will appear on the same line and you can control their width, height, margins, and padding:

foo bar baz

You could, for example, add the following CSS:

div {
  display: inline-block;
  width: 80px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

This would create three inline boxes, each 80px wide, 50px high, with a 10px margin around them.

Choosing the Right Display Value

• Use block for elements that need to occupy the full width and start on a new line.
• Use inline for elements that should flow within text content without taking up a full line. However, be aware of the limitations regarding width, height, and vertical padding/margin.
• Use inline-block when you need the flexibility of setting width, height, and all margins/padding while still having elements flow inline. This is often the most versatile option for creating complex layouts.