The display Property: block, inline and inline-block

The CSS display property controls how an element takes up space on the page. Learn how block, inline and inline-block work, and display none vs visibility hidden.

Block elements

A block element starts on a new line and stretches to fill the full width of its parent, like a paragraph in a book. Elements after it go below it.

Examples of block elements by default: <div>, <p>, <h1> to <h6>, <ul>, <li>, <section>, <header>, <footer>.

• You can set width, height, padding and margin on all sides.
• Without a width, they take 100% of the available width.

Inline elements

An inline element sits inside a line of text, like a word in a sentence. It only takes as much width as its content, and it does not start a new line.

Examples: <span>, <a>, <strong>, <em>, <code>.

• width and height are ignored.
• Left and right padding and margin push neighbors away, but top and bottom margins don't move the lines around it.

<p>Our <span class="tag">new</span> menu is out. <a href="/menu">See the menu</a>.</p>

.tag {
  background-color: #ffeb3b;
  padding: 2px 6px;
  width: 200px;   /* ignored: inline elements have no width */
}

The word "new" gets a yellow highlight with a little padding, and it stays in the middle of the sentence. The width: 200px does nothing, because <span> is inline.

Inline-block elements

inline-block is a mix of both. The element sits in a line like inline, but you can give it a width, height, and full padding and margin like a block.

<nav class="tabs">
  <a href="/">Home</a>
  <a href="/shop">Shop</a>
  <a href="/contact">Contact</a>
</nav>

.tabs a {
  display: inline-block;
  width: 110px;
  padding: 10px;
  margin-bottom: 8px;
  text-align: center;
  background-color: #263238;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

The three links appear side by side as equal 110px buttons. Without inline-block, the width would be ignored and the top and bottom padding would overlap other lines.

Value	New line?	Width and height?	Example tags
block	Yes	Yes	<div>, <p>, <h1>
inline	No	No	<span>, <a>, <strong>
inline-block	No	Yes	<button>, <input> (by default)

Common mistake: Changing an element's tag to get a different display. Choose the HTML tag for its meaning, then change how it looks with display. For example, keep a navigation link as <a> and give it display: block; if you need it full width.

display: none vs visibility: hidden

Both properties hide an element, but they behave differently:

• display: none removes the element completely. It takes up no space, as if it were not in the HTML. Screen readers ignore it too.
• visibility: hidden makes the element invisible, but it still takes up its space. You see an empty gap.

.promo-banner {
  display: none;        /* gone, the content below moves up */
}

.placeholder {
  visibility: hidden;   /* invisible, but the space stays */
}

Use display: none for things like a closed menu or a hidden message. Use visibility: hidden when you need to keep the layout from jumping.

Tip: In Chrome and Edge DevTools, select an element in the Elements panel and press the H key to hide it quickly. It's handy for checking what's behind something.

flex and grid come later

display has more values. The two most important ones for layouts are display: flex and display: grid. They let you place elements in rows, columns and grids with very little code. You'll learn them in the Flexbox and Grid modules. For now, understanding block and inline will make those much easier.

Practice exercise

Create a list of five skills (like "HTML", "CSS", "Design") as <span> elements inside a <p>. Style them as small "pill" tags with display: inline-block, padding, a background color, rounded corners and margin: 4px. Then add a <div class="hidden-message"> with a short message, give it display: none, and switch it to display: block in DevTools to see it appear.

Hint: rounded pill corners are border-radius: 999px;.

Key takeaways

• Block elements start on a new line and fill the full width.
• Inline elements flow inside text and ignore width and height.
• inline-block sits in a line but accepts width, height and full spacing.
• display: none removes an element; visibility: hidden hides it but keeps its space.
• flex and grid are powerful display values you'll learn later.