Python The Display Property (block, inline, inline-block, none)
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.
"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 <span> 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
Common Beginner Traps & How to Fix Them
Trying to set width: 200px on a <span> or <a> without inline-blockWhy it happens: Inline elements by specification ignore explicit width and height properties.
How to fix: Add display: inline-block; or display: block;.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Convert a link to an inline-block button
- Write a CSS rule for .btn-link setting display: inline-block; and padding: 10px 20px;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.