Skip to main content

Understanding CSS Display: Block, Inline, and Inline-Block for Beginners

· 3 min read
Parth Maheta

When styling elements in HTML with CSS, the display property plays a crucial role in determining how elements are rendered on the web page. Three commonly used values for the display property are block, inline, and inline-block. In this article, we'll explore each of these values, understand their characteristics, and see how they influence the layout of HTML elements.

1. Display: Block​

The display: block property is used to make an element behave like a block-level element. Block-level elements start on a new line and take up the full width available, pushing subsequent elements to the next line. Key characteristics of block-level elements include:

  • They create a "block" or "box" structure.
  • They stack vertically on top of each other.
  • They take up the full width available.

Example:

.block-element {
  display: block;
  width: 100%;
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}
<div class="block-element">This is a block-level element.</div>
<div class="block-element">Another block-level element.</div>

2. Display: Inline​

The display: inline property is used to make an element behave like an inline element. Inline elements do not start on a new line and only take up as much width as necessary. Key characteristics of inline elements include:

  • They do not create a new line after the element.
  • They only take up as much width as necessary.

Example:

.inline-element {
  display: inline;
  background-color: #2ecc71;
  color: #fff;
  padding: 5px;
  margin-right: 10px;
}
<span class="inline-element">This is an inline element.</span>
<span class="inline-element">Another inline element.</span>

3. Display: Inline-Block​

The display: inline-block property combines the features of both block and inline. Elements with display: inline-block will:

  • Flow like inline elements (no new line).
  • Have block-like properties (width, height, padding, margin).

This makes it a versatile choice for elements that need to be horizontally aligned and have specific dimensions. Key characteristics of inline-block elements include:

  • They flow inline, allowing them to be horizontally aligned.
  • They can have block-like properties, such as width and height.

Example:

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: #f39c12;
  color: #fff;
  padding: 10px;
  margin-right: 10px;
}
<div class="inline-block-element">Inline-block element</div>
<div class="inline-block-element">Another inline-block element</div>

Conclusion​

Understanding the display property values of block, inline, and inline-block is foundational for creating well-structured and visually appealing web layouts. Whether you want elements to stack vertically, flow horizontally, or combine both behaviors, choosing the right display value is essential. As you dive deeper into web development, mastering these basic layout concepts will empower you to create sophisticated and responsive user interfaces.