The Display Property (block, inline, inline-block, none)

In Plain English

The display property is the master switch that controls how an element behaves in the layout flow. You can turn an inline link into a block button, place blocks side-by-side with inline-block, or hide elements completely from the DOM flow with display: none.

The Mental Model

"display: block is like claiming an entire park bench for yourself. display: inline is squeezing onto the bench shoulder-to-shoulder with others. display: none is becoming an invisible ghost."

Deep Dive: How It Works

display: block: Takes up 100% width, starts on a new line, respects width, height, padding, margin.

display: inline: Flows inside text sentences (like or <a>). Ignores vertical width, height, and vertical margins!

display: inline-block: Sits side-by-side like inline text, BUT respects width, height, and vertical padding/margins! (The classic button display mode).

display: none vs visibility: hidden: display: none removes the element from layout space completely; visibility: hidden makes it invisible but preserves the blank gap.

Syntax Blueprint

/* Turn <a> tag into a clickable button with width and padding */
.btn {
  display: inline-block;
  padding: 8px 16px;
}

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

Use inline-block for buttons and display: none to toggle visibility.

Core Rules to Remember

inline-block for Buttons: Allows <a> and to accept custom padding, height, and width while sitting inline.

display: none Collapses Space: Leaves zero blank space on screen when hidden.

Inline Ignores Top/Bottom Margins: Never try to set margin-top on plain —use inline-block instead.

Common Beginner Traps & How to Fix Them

Mistake:Trying to set width: 200px on a or <a> without inline-block

Why it happens: Inline elements by specification ignore explicit width and height properties.

How to fix: Add display: inline-block; or display: block;.

Pro Tip: In modern CSS, display: flex and display: grid are the ultimate successors for complex multi-column layouts!

Live Interactive Example

Hit Run Code to see it live

Inline-Block Buttons and Toggled Display

CSS3

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: inline-block allows buttons to sit next to each other while respecting padding and margins.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Convert a link to an inline-block button

Write a CSS rule for .btn-link setting display: inline-block; and padding: 10px 20px;

Browser Preview & Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.

Deep Dive: How It Works

display: block: Takes up 100% width, starts on a new line, respects width, height, padding, margin.

display: inline: Flows inside text sentences (like or <a>). Ignores vertical width, height, and vertical margins!

display: inline-block: Sits side-by-side like inline text, BUT respects width, height, and vertical padding/margins! (The classic button display mode).

display: none vs visibility: hidden: display: none removes the element from layout space completely; visibility: hidden makes it invisible but preserves the blank gap.