Skip to main content

CSS Inline-Block: Creating Responsive Layouts

CSS display: inline-block is a value for the display property that allows an element to be displayed as an inline-level block container.

This means that the element is treated as an inline element but can also have a width, height, padding, and margin applied to it just like a block-level element.

As an example:

Editor

In this example:

  • We have a container with a fixed width of 400 pixels and a solid black border.
  • The text-align property is set to center to center the inline-block elements inside the container.
  • Inside the container, we have three div elements with the class box.
  • Each box has a fixed width and height, a margin of 10 pixels, and a pink background color.
  • The display property is set to inline-block, which allows the boxes to be displayed inline but also have a width and height applied to them.
  • Because the boxes are displayed inline, they are arranged horizontally within the container. Because they are also block-level containers, their width and height properties are applied, and they are separated by the margin.

The differences between display: inline, display: inline-block, and display: block:

Editor

In this example:

  • We have three different containers, each containing three elements with a different display value.

The first container:

  • Contains three elements with display: inline.
  • These elements flow inline with each other, and their width is determined by their content.
  • The margin-right property creates some space between the elements.

The second container:

  • Contains three elements with display: inline-block.
  • These elements flow inline with each other, but they also have a fixed width and height, as well as padding and a border.
  • The margin-right property creates some space between the elements.

The third container:

  • Contains three elements with display: block.
  • These elements are block-level elements, which means they take up the full width of their container and start on a new line.
  • The margin-bottom property creates some space between the elements.