CSS
Display and Visibility
Master the display property to control layout behavior and visibility techniques to show and hide content dynamically.
Understanding Display Types
The display property controls how elements behave in the page layout. Think of it like choosing whether furniture should be a wall shelf (block) that takes the full wall width, a picture frame (inline) that sits next to other frames, or completely invisible (none).
Every HTML element has a default display type. Paragraphs and headings are naturally block elements, while links and spans are inline elements. The display property lets you override these defaults.
Block Elements
Take full width, stack vertically like boxes
Inline Elements
Flow like text, sit next to each other
Inline-Block
Best of both — flows inline but accepts width/height
None
Element disappears completely from layout
Block Display
Block elements act like building blocks — they stack on top of each other and stretch to fill their container's width. The WanderLust team wants their navigation links to become full-width buttons instead of inline text.
/* Transform navigation links into block-level buttons */
.nav-link {
display: block; /* Make each link take full width */
background: #0ea5e9; /* WanderLust sky blue background */
color: white; /* White text for contrast */
padding: 12px 20px; /* Generous padding for touch targets */
margin-bottom: 8px; /* Space between each button */
text-decoration: none; /* Remove underline */
border-radius: 8px; /* Rounded corners */
}What just happened?
The links transformed from inline text flowing horizontally into block-level buttons stacked vertically. Each button now takes the full container width and can have margins, padding, and backgrounds applied properly. Try this: Change the display back to inline to see the difference.
Inline Display
Inline elements flow like words in a sentence — they sit next to each other horizontally and only take up as much width as their content needs. However, inline elements have limitations: they ignore width, height, and vertical margins.
/* Style destination tags as inline elements */
.destination-tag {
display: inline; /* Flow like text */
background: #f97316; /* WanderLust sunset orange */
color: white; /* White text */
padding: 4px 8px; /* Small padding (top/bottom limited) */
margin: 0 4px; /* Only horizontal margins work */
border-radius: 4px; /* Rounded corners */
font-size: 12px; /* Small text */
}Inline-Block Display
Inline-block combines the best of both worlds — elements flow horizontally like inline elements but accept width, height, and all margins like block elements. This makes it perfect for creating button rows or card galleries.
/* Create destination cards that sit side by side */
.destination-card {
display: inline-block; /* Flow horizontally but accept dimensions */
width: 200px; /* Fixed width (works because inline-block) */
height: 150px; /* Fixed height */
background: white; /* White background */
border: 2px solid #e2e8f0; /* Light border */
border-radius: 12px; /* Rounded corners */
padding: 16px; /* Interior spacing */
margin: 8px; /* Space around each card */
vertical-align: top; /* Align tops when heights differ */
}What just happened?
The cards flow horizontally like inline elements but accept width and height properties like block elements. The vertical-align: top ensures all cards align at the top even if their content heights differ. Try this: Remove the width property to see how inline-block elements size to their content.
Hiding Elements with Display None
Setting display: none makes elements completely disappear from the page — they take up no space and become invisible. This is different from making something transparent; the element is removed from the document flow entirely.
The WanderLust team wants to create a mobile menu that's hidden by default and only appears when needed. They also want to hide certain promotional banners on smaller screens.
/* Hide mobile menu by default */
.mobile-menu {
display: none; /* Completely hidden - takes no space */
background: #0f172a; /* Dark background when shown */
padding: 20px; /* Padding for when it becomes visible */
border-radius: 8px; /* Rounded corners */
}
/* Hide promotional banner on mobile */
.promo-banner {
display: none; /* Hidden by default */
background: #f97316; /* Sunset orange background */
color: white; /* White text */
padding: 12px; /* Interior spacing */
text-align: center; /* Centered text */
}Visibility Property
The visibility property offers a different approach to hiding elements. While display: none removes elements completely, visibility: hidden makes them invisible but keeps their space reserved in the layout.
Think of visibility: hidden like an invisible person still sitting in a chair — the chair space is occupied, you just can't see the person. With display: none, both the person and chair disappear completely.
/* Compare display none vs visibility hidden */
.hidden-with-display {
display: none; /* Completely removed from layout */
background: #ef4444; /* Red background (won't show) */
padding: 20px; /* Padding (won't take space) */
margin: 10px; /* Margin (won't create gaps) */
}
.hidden-with-visibility {
visibility: hidden; /* Invisible but space preserved */
background: #0ea5e9; /* Blue background (invisible) */
padding: 20px; /* Padding (still takes space) */
margin: 10px; /* Margin (still creates gaps) */
color: white; /* Text color (invisible) */
}What just happened?
The display: none element vanished completely — no gap between Box 1 and Box 2. The visibility: hidden element is invisible but still reserves its space — notice the gap between Box 2 and Box 3 where the hidden element sits. Try this: Use visibility for smooth animations where you don't want layout jumps.
Practical Visibility Applications
The WanderLust team wants to create a loading state where placeholder content remains in place while actual content loads. Using visibility prevents layout shifts that can make the page feel jumpy.
/* Create loading placeholders that maintain layout */
.destination-card {
background: white; /* White background */
border: 1px solid #e2e8f0; /* Light border */
border-radius: 12px; /* Rounded corners */
padding: 20px; /* Interior spacing */
margin-bottom: 16px; /* Space between cards */
}
.loading-text {
visibility: hidden; /* Hide text but keep its space */
background: #e2e8f0; /* Gray placeholder background */
border-radius: 4px; /* Slightly rounded */
margin: 8px 0; /* Vertical spacing */
}
.loading-placeholder {
background: #e2e8f0; /* Gray background for loading state */
height: 20px; /* Fixed height */
border-radius: 4px; /* Rounded corners */
margin: 8px 0; /* Vertical spacing */
}Responsive Display Control
One of the most powerful uses of the display property is creating responsive layouts where elements appear or disappear based on screen size. The WanderLust team wants different navigation styles for desktop and mobile users.
Media queries combined with display properties allow you to show desktop menus on large screens and mobile hamburger menus on small screens, without needing JavaScript for the basic show/hide functionality.
/* Desktop navigation - visible by default */
.desktop-nav {
display: block; /* Show on desktop */
background: white; /* White background */
padding: 12px 0; /* Vertical padding */
border-bottom: 1px solid #e2e8f0; /* Bottom border */
}
.desktop-nav a {
display: inline-block; /* Horizontal flow with sizing control */
padding: 8px 16px; /* Button-like padding */
color: #0ea5e9; /* WanderLust blue */
text-decoration: none; /* No underlines */
margin-right: 20px; /* Space between links */
}
/* Mobile navigation - hidden by default */
.mobile-nav {
display: none; /* Hidden on desktop */
background: #0f172a; /* Dark background */
padding: 16px; /* Generous padding */
}Performance Tip
Elements with display: none don't trigger paint or layout calculations, making them more performance-friendly than visibility: hidden elements. However, visibility: hidden is better for smooth animations since it doesn't cause layout shifts.
Common Display Patterns
Understanding when to use each display type becomes intuitive with practice. Here are the most common patterns the WanderLust team uses across their website components.
Block for Layouts
Sections, headers, main content areas
Inline for Text Flow
Links, spans, emphasis within paragraphs
Inline-Block for Components
Buttons, cards, form controls
None for State Changes
Modals, mobile menus, loading states
Remember that display and visibility are your primary tools for controlling what users see. Master these properties, and you'll be able to create dynamic, responsive layouts that adapt beautifully to different contexts and user needs.
Quiz
1. The WanderLust team wants destination cards to sit side by side but have specific dimensions. What does display: inline-block provide?
2. What's the key difference between visibility: hidden and display: none for WanderLust's loading states?
3. When creating WanderLust's navigation, what's the natural behavior difference between block and inline elements?
Up Next
Master CSS positioning to precisely control where elements appear on the page, from static flow to absolute precision.