Controlling Display Behavior
Every element has a default display value, but CSS can override it with the display property — one of the most powerful tools for controlling layout.
Common display Values
| Value | Behavior |
|---|---|
| block | Starts on a new line, takes full available width |
| inline | Flows with text, only as wide as its content |
| inline-block | Flows like inline, but accepts width/height like block |
| none | Removed from the layout entirely, as if it doesn’t exist |
| flex | Turns the element into a flex container |
| grid | Turns the element into a grid container |
inline-block in Action
<style>
.pill {
display: inline-block;
width: 100px;
padding: 6px 0;
text-align: center;
background: steelblue;
color: white;
border-radius: 999px;
margin-right: 6px;
}
</style>
<span class="pill">One</span>
<span class="pill">Two</span>
<span class="pill">Three</span>Output
flex and grid are Also display Values
display: flex and display: grid turn an element into a layout container, changing how its direct children are positioned. These power modern CSS layout, covered in the Flexbox and Grid lessons.
Best Practice
Use display: none for elements that should be conditionally hidden and removed from the page flow entirely (like a closed modal or an inactive tab), and visibility: hidden only when you need to preserve layout space.