Display property
Learn block, inline and inline-block values.
What does the display property do?
In CSS, the display property decides how an element is laid out. Three common values are block, inline and inline-block. The value controls whether the element starts a new line and whether width and height take effect.
For example, an a link is inline by default; it flows side by side. But if you give it display: block, each link starts its own line.
block: new line, full width
A block element starts on a new line and ends with a new line; it fills the row it sits in. Width, height, top and bottom margins all apply fully. Typical block elements: div, p, h1, ul, section.
So two block elements stack vertically, not side by side. For horizontal layouts you need flexbox or grid.
inline and inline-block
inline elements flow side by side; they never start a new line. Width and height declarations have no effect; only horizontal margins work. Typical inline elements: span, a, em, strong.
inline-block blends the two: it sits inline but width, height and vertical margins also work. Ideal for button-like links.
Exercise Lay out menu links
Add two style blocks. First an a.button class selector with display: inline-block and padding: 0.5rem 1rem. Second a nav a descendant selector with display: block (so each link sits on its own line).
Show example solution
/* lay out menu links */
a.button {
display: inline-block;
padding: 0.5rem 1rem;
}
nav a {
display: block;
}Test yourself
-
Which HTML tag is a block element by default?
- span
- p
- a
- strong
Show answer
p — Correct. The p tag is a block element by default; it starts on a new line.
-
Make the link an inline block
a.button { ____; padding: 0.5rem 1rem; }Show answer
a.button { display: inline-block; padding: 0.5rem 1rem; } -
Match each value to its layout
- block
- New line, full width
- inline
- Side by side, no width
- inline-block
- Side by side, width works