CSS display property (block, inline, inline-block)

In CSS, the display property determines how an element is displayed on a webpage. It allows you to control the behavior and layout of the element. There are several values for the display property, but in this article, we will focus on three popular ones: block, inline, and inline-block.

Block Elements

Block elements are elements that will take up the full width available and start on a new line. By default, most HTML elements are displayed as block elements, such as <div>, <p>, and <h1> to <h6>. When you set an element's display property to block, it means that the element will have line breaks before and after it, and it will automatically expand to fill its container's width.

For example, let's say we have the following HTML code:

<div class="block">This is a block-level element.</div>

And the corresponding CSS:

.block {
  display: block;
  background-color: #f2f2f2;
  padding: 10px;
  margin-bottom: 10px;
}

The div with the block class will be displayed as a block-level element with a light gray background, 10 pixels of padding, and a 10-pixel bottom margin. It will take up the full width of its parent container and start on a new line.

Inline Elements

In contrast to block elements, inline elements do not start on a new line and only take up as much horizontal space as necessary. They do not create line breaks before or after themselves. Examples of inline elements are <span>, <a>, and <img>. When you set an element's display property to inline, it will behave as an inline element.

For instance, consider the following HTML:

<span class="inline">This is an inline element.</span>

With the following CSS:

.inline {
  display: inline;
  background-color: #f2f2f2;
  padding: 5px;
  margin-right: 5px;
}

The span with the inline class will be displayed as an inline element with a light gray background, 5 pixels of padding, and a 5-pixel right margin. It will only take up as much space as its content requires, without starting a new line.

Inline-Block Elements

Inline-block elements combine the characteristics of both block and inline elements. They take up as much horizontal space as necessary, do not start on a new line, and allow you to set width and height properties. It is useful when you want an element to be inline, but also have some block-like properties.

Let's take a look at the following example:

<div class="inline-block">This is an inline-block element.</div>

With the corresponding CSS:

.inline-block {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 10px;
  margin: 5px;
  width: 200px;
}

The div with the inline-block class will be displayed as an inline-block element with a light gray background, 10 pixels of padding, a 5-pixel margin, and a fixed width of 200 pixels. It will only take up as much horizontal space as necessary and additional elements can be positioned alongside it.

In conclusion, the display property in CSS allows you to control how elements are displayed on a webpage. By utilizing the block, inline, and inline-block values, you can greatly influence the layout and behavior of your elements. Understanding these concepts is crucial for creating well-structured and visually appealing websites.