CSS Display

What is Display?

The display property in CSS determines how an element is rendered in the document flow — specifically, how it’s visually structured, how it interacts with surrounding elements, and whether it’s visible or hidden. It defines the element’s layout behavior.

Different display values change:

Box type — whether the element is a block-level box, inline-level box, or another special type.
Space usage — whether it occupies the full width, shares space with others, or is removed from the layout.
Ability to set dimensions — some display types ignore width and height.

Common display values include:

block — Takes up the full available width, starts on a new line, and respects width and height.
inline — Sits in line with surrounding text, ignores width and height.
inline-block — Behaves like inline elements but allows setting width and height.
flex — Turns the element into a flex container for flexible layouts.
grid — Turns the element into a grid container for grid-based layouts.
none — Hides the element completely and removes it from the layout.

Example:

/* A block element */
div {
  display: block;
}

/* An inline element */
span {
  display: inline;
}

/* A hidden element */
.hidden {
  display: none;
}

Common Display Values

block – full-width by default (e.g., <div>)
inline – flows with text (e.g., <span>)
inline-block – inline layout but accepts height/width
none – removes the element entirely from the page

div {
  display: block;
}

span {
  display: inline;
}

Block vs Inline

Block elements start on a new line and take full width. Inline elements appear side-by-side and ignore width/height.

Inline-Block

The inline-block value for the display property is useful when you want elements to appear next to each other on the same line (like inline elements) but still be able to setwidth, height, margin, padding, and other box-model properties (like block elements).

Unlike inline, which ignores width and height, inline-block respects these properties. This makes it perfect for creating horizontally aligned buttons, cards, or navigation items.

Example: Two buttons will appear side-by-side, each with a fixed width and height.

button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
}

<button>Button 1</button>
<button>Button 2</button>

Hiding Elements

There are two common ways to hide elements in CSS: display: none and visibility: hidden.

display: none; — The element is completely removed from the layout. It won’t take up any space on the page and behaves as if it’s not in the DOM (though it still exists in the code).
visibility: hidden; — The element is invisible but still takes up the same space in the layout. This can be useful when you want to hide content without shifting other elements.

Examples:

.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

<p>This paragraph is visible.</p>
<p class="hidden">This paragraph is hidden and does not take space.</p>
<p class="invisible">This paragraph is hidden but still takes up space.</p>

Practice Prompt

Create three <div> elements:

One with display: block
One with display: inline
One with display: inline-block and set width

<div style={{ display: "block", backgroundColor: "lightblue", marginBottom: "10px" }}>
  Block Element
</div>

<div style={{ display: "inline", backgroundColor: "lightgreen", padding: "5px" }}>
  Inline Element
</div>

<div style={{ display: "inline-block", backgroundColor: "lightcoral", width: "150px", height: "50px", marginLeft: "10px" }}>
  Inline-Block Element
</div>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu