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

Next lesson: Display none and visibility

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies