Hey there!
When learning CSS, one of the first and most important properties to understand is the display property. It controls how elements are rendered and behave in the layout flow — whether they stack vertically, flow inline with text, or behave in a hybrid manner.
In this post, we’ll explain the three most common values of the display property: block, inline, and inline-block. You’ll learn what each means, how they affect your elements, and when to use each one. Plus, practical code examples will help you see these concepts in action.
Let’s get started!
1. What is the CSS display Property?
The display property defines the display behavior of an element. It determines:
- How an element participates in the layout (block or inline flow)
- Whether it can have width and height
- How margins and paddings affect it
The three main values we focus on here are:
blockinlineinline-block
2. display: block
- Elements with
display: blocktake up the full width available (by default). - They always start on a new line, stacking vertically.
- You can set width, height, margin, and padding freely.
- Common block elements:
<div>,<p>,<h1> - <h6>,<section>
Example:
<style>
div {
display: block;
width: 300px;
margin: 10px auto;
padding: 20px;
background-color: lightblue;
}
</style>
<div>Block-level element</div>
<div>Another block element</div>
Result: Each <div> starts on its own line, stacking vertically.
3. display: inline
- Elements with
display: inlineflow inline with text and other inline elements. - They do NOT start on a new line.
- You cannot set width or height — those properties have no effect.
- Margins and paddings only affect horizontal spacing, not vertical.
- Common inline elements:
<span>,<a>,<strong>,<em>
Example:
<style>
span {
display: inline;
padding: 5px 10px;
background-color: lightcoral;
}
</style>
<p>This is <span>inline text</span> inside a paragraph.</p>
Result: The <span> blends with the text flow, only taking up as much width as its content.
4. display: inline-block
inline-blockelements behave like inline elements (flow inline, no line breaks by default).- BUT you can set width, height, margin, and padding just like block elements.
- This gives you flexibility to control size and keep elements inline.
- Useful for things like buttons, navigation links, or custom inline widgets.
Example:
<style>
.box {
display: inline-block;
width: 150px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
vertical-align: top;
}
</style>
<div class="box">Inline-block box 1</div>
<div class="box">Inline-block box 2</div>
<div class="box">Inline-block box 3</div>
Result: The .box elements sit next to each other horizontally, but each has a fixed size.
5. Visual Summary
| Display Value | Starts on New Line? | Can Set Width/Height? | Typical Use Cases |
|---|---|---|---|
block | Yes | Yes | Containers, sections, divs |
inline | No | No | Text spans, links, buttons |
inline-block | No | Yes | Buttons, nav items, badges |
6. Practical Comparison Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Display Property Example</title>
<style>
.block {
display: block;
width: 200px;
padding: 10px;
background-color: #6c757d;
color: white;
margin-bottom: 10px;
}
.inline {
display: inline;
padding: 10px;
background-color: #dc3545;
color: white;
}
.inline-block {
display: inline-block;
width: 200px;
padding: 10px;
background-color: #28a745;
color: white;
margin-right: 10px;
vertical-align: top;
}
</style>
</head>
<body>
<h2>Block Elements</h2>
<div class="block">Block 1</div>
<div class="block">Block 2</div>
<h2>Inline Elements</h2>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<h2>Inline-Block Elements</h2>
<div class="inline-block">Inline-Block 1</div>
<div class="inline-block">Inline-Block 2</div>
</body>
</html>
Open this page in your browser to see how each display type behaves.
7. When to Use Each?
- Use block when you want elements stacked vertically with control over width/height.
- Use inline for styling parts of text or small UI elements that flow naturally.
- Use inline-block when you want elements next to each other but still sized like blocks (e.g., buttons in a toolbar).
8. Summary
What you learned:
displaycontrols how elements flow and size themselves in the layout.blockelements take full width, stack vertically, and accept width/height.inlineelements flow with text and ignore width/height.inline-blockcombines the flow of inline with size control of block.- Knowing when to use each helps you build clean, flexible layouts.
Master these basics, and you’ll have a solid foundation for CSS layout!
Until next time — happy styling!
