Display Property: block, inline, inline-block Explained

You have been placing elements on pages for several lessons now, but you haven't yet learned why some elements, like div and p, automatically stack on separate lines, while others, like span and a, sit side by side in the middle of a sentence. The answer is the display property, and understanding it properly is the final piece you need before moving on to flexbox and grid, which are built on top of these same concepts.

Every HTML element has a default display value, and the three you must understand first are block, inline, and inline-block.

Block Level Elements

A block-level element always starts on its own new line and stretches to fill the full width of its parent by default, regardless of how much content is inside it. Common block elements include div, p, h1 through h6, ul, and li. You can set width, height, margin, and padding on all sides freely, and they all behave exactly as you'd expect from the box model lesson.

<div class="block-example">I'm a block.</div>
<div class="block-example">So am I, on a new line.</div>

.block-example {
  background: #eef;
  margin-bottom: 8px;
}

Inline Elements Explained

An inline element, by contrast, does not start a new line. It flows along with surrounding text, taking up only as much horizontal space as its content needs. Common inline elements include span, a, strong, and em. Critically, inline elements mostly ignore width and height (setting them has no effect), and they only respect left and right margin and padding properly; top and bottom margin on an inline element is usually ignored for layout purposes, which surprises a lot of beginners who expect it to push other lines away like a block element would.

<p>Hi, I'm <span class="highlight">Vikesh Singh</span>, a developer.</p>

.highlight {
  background: yellow;
  padding: 2px 6px;
}

This works fine, because the padding is horizontal-feeling here, but if you tried to set height: 100px on that span, nothing would visually happen, because inline elements don't size themselves like boxes the way block elements do.

Inline Block The Middle Ground

Inline-block is the useful middle ground: it flows inline with surrounding content like an inline element (doesn't force a new line), but it respects width, height, and all four margins and all four paddings fully, like a block element.

<nav>
  <a class="nav-link" href="#">Home</a>
  <a class="nav-link" href="#">About</a>
  <a class="nav-link" href="#">Contact</a>
</nav>

.nav-link {
  display: inline-block;
  padding: 8px 16px;
  margin-right: 4px;
  background: #333;
  color: white;
  text-decoration: none;
}

Before flexbox existed, this was the standard way to build horizontal navigation bars: take naturally block-ish links, turn them inline-block so they sit side by side, and now padding and margin behave fully as expected. You will still see inline-block in real code today, even though flexbox (next lesson) has mostly replaced it for this exact use case, because flexbox solves the same problem with fewer quirks.

One well-known quirk of inline-block worth knowing about: adjacent inline-block elements written with whitespace (like a line break) between them in the HTML can end up with a small, unwanted gap between them, because that whitespace itself is treated like a tiny inline space. This is a classic "why is there a mystery 4px gap" bug. Flexbox, again, avoids this problem entirely, which is one more reason it has become the default choice.

Changing Display Values

You can change any element's default display value. A common technique is turning a normally-inline a tag into block so an entire clickable area (like a whole menu row) becomes a link, not just the text itself.

.full-width-link {
  display: block;
  padding: 12px;
  background: #f5f5f5;
}

There is also display: none, which removes an element from the page entirely, as if it doesn't exist. It takes up no space and is invisible, which is different from just making something transparent with opacity (which still takes up space and can still technically be clicked in some cases unless handled carefully). display: none is commonly used for things like hidden dropdown menus or content that's toggled with JavaScript.

A common beginner mistake is confusing visibility: hidden with display: none. visibility: hidden hides the element visually but still reserves its space in the layout, like an invisible placeholder; display: none removes the element and collapses its space completely. Picking the wrong one leads to either a mystery blank gap, or content not actually being removed from the flow.

Practical Tips And Exercise

Practical tip: when you're unsure why two elements won't sit side by side, or why an element's width/height setting seems to be ignored, check its display value first in developer tools. An astonishing number of layout bugs come down to an element quietly being inline when you assumed it was block, or vice versa.

Give it a try: build a simple horizontal navigation bar with three links styled as inline-block, giving each padding and a background color. Then try removing display: inline-block to see them collapse back into separate stacked lines, and add it back to see the difference clearly.