Display in CSS

The display property in CSS is fundamental for controlling the layout of elements on a web page.

It specifies how an element is displayed on the page, determining its rendering and layout behavior. 

block

Elements with display: block take up the full width available, and start on a new line.

They stack vertically, one after another. Common block elements include <div>, <p>, and <h1>.

<style>
  .block-element {
    display: block;
    background-color: lightblue;
  }
</style>

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

Each .block-element will start on a new line and occupy the full width of the container.

inline

Elements with display: inline do not start on a new line. They only take up as much width as necessary and sit within the flow of other inline elements. Common inline elements include <span>, <a>, and <strong>.

<style>
  .inline-element {
    display: inline;
    background-color: lightgreen;
  }
</style>

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

Both .inline-element elements will appear on the same line, and only take up as much width as they need.

inline-block

display: inline-block allows elements to sit next to each other like inline elements but also respects width and height properties like block elements.

<style>
  .inline-block-element {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-color: lightcoral;
    margin: 5px;
  }
</style>

<div class="inline-block-element">Inline-block 1</div>
<div class="inline-block-element">Inline-block 2</div>

Both .inline-block-element divs will be on the same line if there’s enough space, and you can set width and height.

none

display: none removes the element from the document flow, meaning it doesn’t take up any space and is not visible.

<style>
  .hidden-element {
    display: none;
  }
  .show-element {
    display: block;
background:red;
  }
</style>
<div class="show-element">You see this element.</div>
<div class="hidden-element">You won't see this element.</div>

The .hidden-element div will not be displayed at all, nor will it occupy space.

flex

display: flex applies a flexbox layout to an element, making it a flex container. This allows you to control the alignment, direction, and spacing of its child elements.

<style>
  .flex-container {
    display: flex;
    background-color: lightgray;
  }
  .flex-item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

The .flex-container will align its children (.flex-item) in a row by default, distributing them evenly across the container.

grid

display: grid applies a grid layout to an element, creating a grid-based structure for its child elements. This allows precise control over rows and columns.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-color: lightgray;
  }
  .grid-item {
    background-color: lightcoral;
    padding: 20px;
  }
</style>

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

The .grid-container creates a grid layout with three equal columns, and each .grid-item will be placed in one of the grid cells.

These are some of the most common values for the display property, each serving a different purpose and giving you control over how elements are laid out on a web page.