Topic 4 of 30
Display Property
Overview
The display property determines how an element participates in the layout flow. It is the most important CSS property for controlling layout — changing it can fundamentally alter element behavior.
Syntax
css
display: block; /* Full width, new line */
display: inline; /* Text flow, no width/height */
display: inline-block; /* Text flow + width/height */
display: flex; /* Flexbox container */
display: grid; /* Grid container */
display: none; /* Hidden (removed from layout) */
display: contents; /* Element acts as if not there */
display: table; /* Table-like behavior */Common Pitfalls
- display:none removes the element from layout AND hides it — use visibility:hidden to hide but keep space.
- You cannot set width/height on inline elements — use inline-block or block.
- Interview tip: Setting display:flex on a parent makes its direct children flex items — not grandchildren.
Real-World Example
Building a responsive navigation with display properties:
example
css
/* Horizontal nav items */
nav ul {
display: flex;
gap: 8px;
list-style: none;
}
/* Badge — inline but with padding */
.notification-badge {
display: inline-block;
padding: 2px 8px;
background: #FFD700;
color: #000;
border-radius: 999px;
font-size: 12px;
}
/* Hide mobile menu on desktop */
.hamburger {
display: none;
}
@media (max-width: 768px) {
.hamburger { display: block; }
nav ul { display: none; }
nav ul.open { display: flex; flex-direction: column; }
}