Block, Inline, and Inline Block

Block vs. Inline

The display property in CSS can take on a number of different values, two of which are inline and inline-block. Many HTML elements have a value of inline by default, such as links, spans, and images. But what exactly does it mean for an element to be displayed inline? And how does that differ from block or inline-block?

Let’s take a look at a basic example. Consider the following code; we have a single span with the text “Hello, World!“.

.section {
  position: relative;
}

Nothing remarkable; the text is displayed and it wraps so that it fits within the viewport. If we were to replace the span with a p, then the text would have a display value of block instead of inline, because paragraphs have a default display value of block. But the rendered output will look identical.

.section {
  position: relative;
}

So what’s the difference between block and inline then? In this example, there appears to be no difference, so let’s add some additional content to the HTML to highlight how they differ. In the first example (the one with the span), we’ll add another span with some additional text. Here’s what that looks like:

.section {
  position: relative;
}

I’ve added a peach background to the first span and a lavender background to the second so that we can more easily distinguish between them. As you can see, the second span’s text picks up right where the first left off.

Let’s apply a similar change to the example that uses a paragraph instead of a span by adding another paragraph.

.section {
  position: relative;
}

Aha! Now we can start to see a difference. Paragraphs are block elements, and you can clearly see that the paragraphs are rendered as distinct blocks.

Inline vs. Inline Block

Now that we’ve established the difference between inline and block, let’s look into the mysterious inline-block display value. Below we have a paragraph element with a nested span, and the span has a peach background.

span {
  background-color: peachpuff;
}

Suppose we wanted to adjust the spacing around the span text. This is typically done with margin and/or padding. Let’s add 15 pixels of horizontal margin and padding to the span.

span {
  background-color: peachpuff;
  margin: 0 15px;
  padding: 0 15px;

}

This should work exactly as you’d expect; there’s now 30 pixels of space on both sides of the span text; 15 pixels of padding, and 15 pixels of margin. Let’s go one step further and add apply some vertical spacing.

span {
  background-color: peachpuff;
  margin: 15px 15px;
  padding: 15px 15px;
}

Hmm… that doesn’t look very good. The vertical margin wasn’t added at all, and the vertical padding is overlapping the paragraph’s content.

Fortunately, this is the exact problem that inline-block solves! Let’s change the display of the span to inline-block and see what happens.

span {
  background-color: peachpuff;
  margin: 15px 15px;
  padding: 15px 15px;
  display: inline-block;
}

Much better! The vertical margin now exists, and the padding doesn’t cause the span to overlap the paragraph’s text. You can confirm the second point by modifying the CSS in the editor and removing the vertical margin.

At this point, you might be asking why you’d ever use inline if inline-block provides extra functionality. Let’s modify our example by removing the margin and padding and changing the span so that it includes more than one line of text.

span {
  background-color: peachpuff;
  display: inline-block;
}

As you can see, the span’s text is no longer inline with the paragraph’s text; a whole new block was created. If we change the display back to inline, it will revert back to being rendered inline with the paragraph’s text.

Key Points

There’s a lot more to understand about the display property, but here are some of the key points covered in this basic lesson:

• Block elements take up the full width of the containing element by default
• Inline elements will not create a new “block” of content on the page; they’ll be displayed inline with the surrounding elements
• Inline block should be used if you need to add vertical spacing to an inline element

Here are some great resources that go into this topic.

• Josh Comeau - Secret Mechanisms of CSS