CSS Display Block

display: block is one of the most fundamental layout behaviors in CSS. If you’ve ever wondered why a <div> takes a whole line, or why margin: auto sometimes magically centers things (and sometimes refuses), you’re in the right place.

CSS display: block meaning

When an element is block-level, it behaves like a “big rectangular section” in the normal page flow:

  • It starts on a new line.
  • By default it tries to become as wide as possible (usually 100% of its container).
  • You can set width and height (and they actually apply).
  • Vertical spacing (margin-top/margin-bottom) works, but has some special rules (we’ll touch on margin collapsing later).

Lots of HTML elements are block by default: <div>, <p>, <h1>… <h6>, <section>, <ul>, etc. 

.badge {
  display: block;
}

.badge {
  display: inline;
}

.badge {
  display: inline-block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 16px;
  border: 3px solid #111;
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #f6f6f6;
}

.badge {
  padding: 10px 12px;
  border: 2px solid #111;
  background: #fff;
  font-size: 14px;
}

.note {
  margin-top: 12px;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}


  I am a span
  I am another span

  

    Click the snippets above. Notice how block forces each badge onto its own line.

A simple way to remember it

Block = “I take my own row.”
Inline = “I flow inside text.”
Inline-block = “I flow like text, but I’m allowed to be a box.”

Default block behavior: width, line breaks, and sizing

A block element in normal flow will generally stretch to fill its container’s available width. That’s why a <div> often looks like it has width: 100% even when you didn’t set it. 

.panel {
  display: block;
}

.panel {
  display: block;
  width: 240px;
}

.panel {
  display: block;
  width: 60%;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.stage {
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.panel {
  padding: 14px;
  border: 2px solid #111;
  background: #fff;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}

.hint {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}


  

    I am a block element. My width is the container width by default.
  

  

    Try the other snippets: fixed px width vs percentage width.

CSS display: block vs inline

This is one of the most important comparisons in CSS. Here are the big differences:

  • Line breaks: block starts on a new line; inline stays in the same line as surrounding text.
  • Width/height: block respects width/height; inline mostly ignores width/height.
  • Margins/padding: block margins work normally; inline vertical margins don’t behave the same way (and inline padding can visually overlap lines). 
.tag {
  display: inline;
  width: 220px;
  height: 60px;
}

.tag {
  display: block;
  width: 220px;
  height: 60px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.tag {
  border: 2px solid #111;
  background: #fff;
  padding: 6px 10px;
}

.explain {
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}


  

    Here is a
    tag element
    inside a sentence, and here is more text after it.
  


  

    In the inline snippet, width/height are basically ignored.
    In the block snippet, width/height apply and the element breaks onto its own line.

When inline is actually what you want

Inline is perfect for styling small pieces of text: labels, highlighted words, inline icons, etc. The moment you want “a real box” with predictable sizing, block or inline-block usually wins.

Learn more about display: inline in the CSS Display Inline Interactive Tutorial.

CSS display: block vs inline-block

inline-block is a hybrid:

  • It sits in a line like inline content (so multiple items can appear side-by-side without forcing line breaks).
  • But it still behaves like a box (width/height/margins/padding are honored more like a block). 
.item {
  display: block;
  width: 160px;
}

.item {
  display: inline-block;
  width: 160px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}

.item {
  padding: 10px;
  border: 2px solid #111;
  background: #fff;
  margin: 6px;
}

.note {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}


  Item A
  Item B
  Item C

  

    With block, each item claims its own line.
    With inline-block, they can line up horizontally (until they run out of space).

A common inline-block gotcha: whitespace

Inline-block elements treat spaces/newlines in your HTML like text spaces. That can create tiny “mystery gaps” between items. If you ever hit that issue, common fixes are:

  • Remove the whitespace between elements in the HTML
  • Set the container’s font-size: 0 and restore it on children
  • Or just use flex for horizontal layouts (often the easiest in modern CSS)

Learn more about display: inline-block in the CSS Display Inline-Block Interactive Tutorial.

CSS display: block vs flex

This comparison is less “which is better” and more “what are you trying to do?”

  • block is for normal document flow: stacked sections, paragraphs, cards, content areas.
  • flex is for layout inside a container: aligning items on a row/column, spacing, reordering, and “make these things line up nicely.”

A classic mistake is trying to use display: block to do “flex-like alignment” (like evenly spaced nav items). It’s possible… but it’s usually painful. 

.nav {
  display: block;
}

.nav {
  display: flex;
  gap: 10px;
}

.nav {
  display: flex;
  justify-content: space-between;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.frame {
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.nav {
  border: 2px solid #111;
  background: #fff;
  padding: 10px;
}

.nav a {
  display: inline-block;
  padding: 8px 10px;
  border: 1px solid #111;
  text-decoration: none;
  color: #111;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
  background: #fff;
}

.help {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}


  

  

    Block is fine for the container, but flex makes spacing/alignment inside it much easier.

Learn more about display: flex in the CSS Flexbox Interactive Tutorial.

CSS display: block align center (margin: auto;)

Let’s talk about the famous one: centering a block horizontally.

The rule is: margin-left: auto and margin-right: auto will center a block only if it has a width smaller than its container.

If the block is already full width, there’s nothing to “center” (it’s already spanning everything). 

.card {
  display: block;
  width: 240px;
  margin: 0 auto;
}

.card {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.card {
  display: block;
  width: 240px;
  margin-inline: auto;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.stage {
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.card {
  padding: 14px;
  border: 2px solid #111;
  background: #fff;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}

.note {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}


  

    I want to be centered.
  


  

    margin: 0 auto (or margin-inline: auto) centers only when the element has a smaller width than the container.

Notice how in snippet 3 we used margin-inline: auto instead of margin: 0 auto. margin-inline: auto is shorthand for setting both margin-left and margin-right to auto.

Margin auto centers the box, not the text

If you also want the text inside centered, that’s text-align: center (different problem).

CSS display: block vertical align center (margin: auto 0;)

That's what gets a lot of people confused, so let’s be super clear:

  • margin: auto can distribute leftover space in a direction… but only when the layout mode supports it.
  • In normal block flow, vertical “extra space” isn’t distributed the way you expect.

In other words: margin: auto 0 won’t magically vertically center a normal block in normal document flow. That idea needs a container that can “share” extra vertical space (like flex or grid), or it needs a different technique.

Vertical centering solution #1: flex on the parent

If your goal is “center this block vertically inside a container”, flex is one of the easiest solutions. 

.stage {
  display: flex;
  align-items: center;
}

.card {
width: 240px;
margin-inline: auto;
} 
*,
::before,
::after {
  box-sizing: border-box;
}

.stage {
  height: 220px;
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.card {
  padding: 14px;
  border: 2px solid #111;
  background: #fff;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}


  

    I am vertically centered (thanks, flex).

Vertical centering solution #2: grid place-items

Grid can center content with almost suspicious ease. 

.stage {
  display: grid;
  place-items: center;
}

.card {
width: 260px;
} 
*,
::before,
::after {
  box-sizing: border-box;
}

.stage {
  height: 220px;
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.card {
  padding: 14px;
  border: 2px solid #111;
  background: #fff;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}


  

    I am centered both vertically and horizontally (grid did it).

But what about margin: auto 0;

You can see vertical auto margins “do something” in layout modes like flex. In a flex container, auto margins can soak up leftover space. 

.stage {
  display: flex;
  flex-direction: column;
}

.card {
margin: auto 0;
} 
*,
::before,
::after {
  box-sizing: border-box;
}

.stage {
  height: 240px;
  padding: 16px;
  border: 3px solid #111;
  background: #f6f6f6;
}

.card {
  padding: 14px;
  border: 2px solid #111;
  background: #fff;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}


  

    In a column flex container, margin: auto 0 can push me into the vertical center.

Learn more about centering with CSS in the Centering With CSS Interactive Tutorial.

Common real-world use cases for display: block

Anchors (<a>) are inline by default. Turning them into block-level elements is a very common pattern for navigation menus and “clickable cards”. 

.menu a {
  display: block;
  padding: 10px 12px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.menu {
  max-width: 320px;
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 10px;
  font-family: system-ui, Arial, sans-serif;
}

.menu a {
  border: 2px solid #111;
  background: #fff;
  text-decoration: none;
  color: #111;
  margin-bottom: 8px;
}

Making images behave nicely in layouts

Images (<img>) are inline by default, which can create a tiny gap underneath them (because they align to the text baseline). A classic fix is display: block on the image. 

.photo img {
  display: inline;
}

.photo img {
  display: block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.photo {
  width: 320px;
  border: 3px solid #111;
  background: #fff;
  padding: 0;
}

.photo img {
  width: 100%;
  height: auto;
}

.caption {
  padding: 10px;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
  background: #f6f6f6;
  border-top: 2px solid #111;
}


  Random placeholder
  

    Switch between inline and block to see how block avoids baseline weirdness.

Gotchas with display: block

Gotcha #1: margin collapsing

Block elements have a special behavior called margin collapsing: sometimes the margin-top of one block and the margin-bottom of another combine into a single margin instead of stacking.

You might expect “20px + 20px = 40px”, but you get 20px instead. 

p {
  margin: 20px 0;
}

p {
  margin: 20px 0;
}

.box {
display: flex;
flex-direction: column;
} 
*,
::before,
::after {
  box-sizing: border-box;
}

.box {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 0;
}

p {
  border: 2px solid #111;
  background: #fff;
  padding: 10px;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
}


  
Paragraph one

  
Paragraph two

The second snippet makes the container a flex layout, which prevents margin collapsing and gives you the expected 40px between paragraphs. You don’t need to memorize every collapsing rule right now—just remember: block margins can sometimes “merge.”

Gotcha #2: auto margins need room to work

If your block is already full width, margin-inline: auto can’t visually center it. Give the element a width (or max-width) smaller than the container.

Practical pattern: centered content column

This is one of the most reused “block + auto margin” patterns on the internet: a centered column that stays readable on large screens. 

.container {
  max-width: 440px;
  margin-inline: auto;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.page {
  border: 3px solid #111;
  background: #f6f6f6;
  padding: 16px;
}

.container {
  border: 2px solid #111;
  background: #fff;
  padding: 14px;
  font-family: system-ui, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}


  

    

      This is a centered content column. It is a block, it has a max-width, and the
      leftover horizontal space becomes auto margins.
    

    

      This pattern is everywhere because it’s simple and it works.

Quick cheat sheet

  • display: block = new line + fills available width by default.
  • block vs inline: inline flows in text and ignores width/height; block is a box with normal sizing.
  • block vs inline-block: inline-block can sit on the same line but still respects width/height.
  • block vs flex: block is for stacking in document flow; flex is for aligning items inside a container.
  • center a block horizontally: give it a width/max-width, then use margin-inline: auto (or margin: 0 auto).
  • images: img { display: block; } is a common fix for baseline gaps.