Skip to main content

Display Property in CSS Positioning (Live Playground)

The display property is a fundamental aspect of CSS positioning, determining how an element is displayed on the page and affecting the layout of surrounding elements. In this tutorial, you will learn about the display property, its various values, and how it affects the layout of elements, along with sample code and simple explanations.

Display values: block and inline​

The display property has several values, with the most basic being block and inline. Block elements take up the full width available and create a new line before and after the element, while inline elements only take up as much width as necessary and do not create new lines.

Example:

CSS
.block {
  display: block;
  background-color: lightblue;
  width: 200px;
  height: 100px;
}

.inline {
  display: inline;
  background-color: lightblue;
  width: 200px;
  height: 100px;
}
HTML
<div class="block">This is a block element.</div>
<div class="inline">This is an inline element.</div>
<div class="inline">This is another inline element.</div>

In this example, the block element takes up the full width available and creates a new line before and after the element, while the inline elements do not create new lines and only take up as much width as necessary.

Live Playground, Try it Yourself

Display value: inline-block​

The inline-block value combines features of block and inline elements, allowing the element to maintain the block-level properties while being positioned inline with other elements.

Example:

CSS
.inline-block {
  display: inline-block;
  background-color: lightblue;
  width: 200px;
  height: 100px;
}
HTML
<div class="inline-block">This is an inline-block element.</div>
<div class="inline-block">This is another inline-block element.</div>

In this example, the inline-block elements maintain the block-level properties but are positioned inline with other elements.

Live Playground, Try it Yourself

Display values: flex and grid​

The flex and grid display values allow for more advanced and flexible layouts.

Example:

CSS
.flex-container {
  display: flex;
  background-color: lightblue;
}

.flex-item {
  width: 200px;
  height: 100px;
  background-color: darkblue;
  margin: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: lightblue;
}

.grid-item {
  width: 200px;
  height: 100px;
  background-color: darkblue;
  margin: 10px;
}
HTML
<div class="flex-container">
  <div class="flex-item">Flex item 1</div>
  <div class="flex-item">Flex item 2</div>
</div>

<div class="grid-container">
  <div class="grid-item">Grid item 1</div>
  <div class="grid-item">Grid item 2</div>
</div>

In this example, the flex container and grid container use different display values to create flexible layouts. The flex container arranges its child elements in a row, while the grid container places its child elements in a two-column grid.

Live Playground, Try it Yourself

Display value: none​

The none value hides an element completely, removing it from the layout flow.

Example:

CSS
.hidden {
  display: none;
}
HTML
<div class="hidden">This element is hidden.</div>
<div>This element is visible.</div>

In this example, the hidden element is not displayed on the page, and it doesn't affect the layout of surrounding elements.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, you learned about the display property in CSS positioning, its various values, and how it affects the layout of elements. By understanding the role of the display property in positioning, you can create more visually appealing and consistent designs across your web pages.