The display property is one of the most powerful properties in CSS. It controls how an element is rendered—whether it takes up full width like a block, flows inline with text, or uses a completely different layout model like Flexbox or Grid. Understanding display is fundamental to controlling layout and creating complex page structures.
What Is the Display Property?
Every HTML element has a default display value that determines how it behaves in the layout. The display property lets you change this behavior.
Common Display Values
| Property | Values | Description |
|---|---|---|
block | display: block | Takes full width, starts on new line |
inline | display: inline | Flows with text, width/height ignored |
inline-block | display: inline-block | Flows with text but accepts width/height |
none | display: none | Removes element from layout (hidden) |
flex | display: flex | Creates flexible box layout |
grid | display: grid | Creates grid layout |
/* Change display behavior */
.element {
display: block; /* Block-level */
display: inline; /* Inline */
display: inline-block; /* Hybrid */
display: none; /* Hidden */
display: flex; /* Flexbox */
display: grid; /* Grid */
}
/* Default display values */
div, p, h1, section {
display: block; /* Block by default */
}
span, a, strong, em {
display: inline; /* Inline by default */
}
img, button, input {
display: inline-block; /* Inline-block by default */
}display: block
Block-level elements take up the full width available and always start on a new line. They stack vertically.
Block Element Characteristics
- Takes up full width of parent container
- Starts on a new line
- Respects all box model properties (width, height, margin, padding)
- Stacks vertically
- Default for: div, p, h1-h6, section, article, header, footer
/* Block element behavior */
.block-element {
display: block;
width: 300px; /* Width applies */
height: 100px; /* Height applies */
margin: 20px; /* All margins apply */
padding: 15px; /* All padding applies */
background: #3498db;
}
/* Making inline elements block */
span {
display: block; /* Now behaves like a div */
}
/* Common use: centering block elements */
.centered-block {
display: block;
width: 300px;
margin: 0 auto; /* Centers horizontally */
}Block Elements
Block with Custom Width
Block with Custom Width
display: inline
Inline elements flow with text content and don't start on new lines. They only take up as much width as their content needs.
Inline Element Characteristics
- Flows with text content (no line breaks)
- Only takes up width of content
- width and height are IGNORED
- Only horizontal margin and padding apply (left/right)
- Vertical margin and padding don't affect layout (but show visually)
- Default for: span, a, strong, em, img (technically inline-block)
/* Inline element behavior */
.inline-element {
display: inline;
width: 300px; /* IGNORED! */
height: 100px; /* IGNORED! */
margin: 20px; /* Only left/right apply */
padding: 10px; /* Only left/right affect layout */
background: #e74c3c;
}
/* Making block elements inline */
div {
display: inline; /* Now flows like a span */
}
/* Inline elements for navigation */
nav a {
display: inline; /* Links flow horizontally */
margin: 0 10px; /* Horizontal spacing */
}Inline Elements
Inline Width/Height Ignored
Inline Ignores Width/Height
Important: You cannot set width or height on inline elements. If you need sizing control while maintaining inline flow, use display: inline-block instead.
display: inline-block
Inline-block is a hybrid that combines the best of both worlds: it flows inline like text but accepts width and height like blocks.
Inline-Block Element Characteristics
- Flows horizontally like inline elements
- Accepts width and height like block elements
- Respects all box model properties
- No line break before or after
- Perfect for navigation, buttons, and card layouts
- Default for: img, button, input
/* Inline-block element */
.inline-block-element {
display: inline-block;
width: 200px; /* Width applies! */
height: 100px; /* Height applies! */
margin: 10px; /* All margins apply */
padding: 15px; /* All padding applies */
background: #9b59b6;
}
/* Common use: navigation buttons */
nav a {
display: inline-block;
padding: 10px 20px;
margin: 0 5px;
background: #3498db;
}
/* Common use: card grid */
.card {
display: inline-block;
width: 300px;
vertical-align: top; /* Align tops */
}Inline-Block Elements
Comparison: Block vs Inline vs Inline-Block
Block vs Inline vs Inline-Block
💡 When to Use Each:
- Block: Main content areas, sections, containers
- Inline: Text formatting (bold, links within paragraphs)
- Inline-block: Navigation buttons, image galleries, card grids
display: none
Setting display: none completely removes the element from the layout. It's as if the element doesn't exist.
/* Hide element completely */
.element {
display: none; /* Element removed from layout */
}
/* vs visibility: hidden (takes up space but invisible) */
.element {
visibility: hidden; /* Element invisible but space reserved */
}
/* Toggle visibility with JavaScript */
.hidden {
display: none;
}
.visible {
display: block; /* Or inline, inline-block, etc. */
}
/* Responsive hiding */
@media (max-width: 768px) {
.desktop-only {
display: none; /* Hide on mobile */
}
}display: none vs visibility: hidden
display: none vs visibility: hidden:
• display: none - Element removed from layout, no space reserved
• visibility: hidden - Element invisible but space reserved
• Both hide the element, but display: none is more common for showing/hiding content
display: flex (Introduction)
Flexbox is a powerful layout model for arranging items in one dimension (row or column). We'll cover it in depth in later lessons, but here's a preview.
/* Create flex container */
.container {
display: flex; /* Children become flex items */
}
/* Basic flex properties */
.container {
display: flex;
justify-content: space-between; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
}
/* Flex direction */
.container {
display: flex;
flex-direction: row; /* Default - horizontal */
flex-direction: column; /* Vertical */
}Flexbox Preview
Coming Soon: Flexbox is a comprehensive topic with many properties and use cases. We'll dive deep into Flexbox in dedicated lessons covering flex-direction, justify-content, align-items, flex-wrap, flex-grow, flex-shrink, and more!
display: grid (Introduction)
Grid is a two-dimensional layout system for creating complex layouts. Like Flexbox, we'll cover it thoroughly in later lessons.
/* Create grid container */
.container {
display: grid; /* Children become grid items */
}
/* Define columns */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 20px; /* Space between items */
}
/* Or use repeat */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: 100px 200px; /* Define row heights */
}Grid Preview
Coming Soon: CSS Grid is incredibly powerful for two-dimensional layouts. We'll explore grid-template-columns, grid-template-rows, grid-areas, auto-placement, alignment, and much more in dedicated Grid lessons!
Practical Display Examples
Navigation Bar (inline-block)
Navigation Bar
Card Grid (inline-block)
Card Grid with inline-block
Hide/Show Toggle
Toggle Visibility with display
Key Takeaways
- display: block - Full width, starts on new line, respects all box model properties
- display: inline - Flows with text, ignores width/height, only horizontal margin/padding affect layout
- display: inline-block - Flows horizontally but accepts width/height, best for navigation and cards
- display: none - Completely removes element from layout (vs visibility: hidden which reserves space)
- display: flex - One-dimensional flexible layouts (covered in detail later)
- display: grid - Two-dimensional grid layouts (covered in detail later)
- Every element has a default display value
- Block elements: div, p, h1-h6, section, article, header, footer
- Inline elements: span, a, strong, em
- Inline-block elements: img, button, input
- Change display to control layout behavior
- Use inline-block for horizontal layouts without Flexbox
What's Next?
Now that you understand the display property, you're ready to learn about Position Property. In the next lesson, we'll explore how the position property (static, relative, absolute, fixed, sticky) controls where elements appear on the page and how they relate to other elements. Positioning is essential for creating overlays, tooltips, sticky headers, and complex layouts.
The display property is fundamental to CSS layout—understanding block, inline, and inline-block behavior lets you control how elements flow and interact. While Flexbox and Grid are modern layout tools, knowing traditional display values is still essential for day-to-day styling!