The display Property

display is one of the most important CSS properties. It controls how an element occupies space on the page and how it interacts with its neighbors.

Core values

block — block element

• Takes up the full available width
• Always starts on a new line
• Respects width, height, margin, and padding on all sides

div, p, h1, h2, h3, section, article, header, footer, nav {
  display: block; /* default for these tags */
}

<p>First paragraph — takes the full width</p>
<p>Second paragraph — also starts on a new line</p>

inline — inline element

• Takes up only as much width as its content needs
• Does not start on a new line — sits in the text flow
• width and height have no effect
• margin-top and margin-bottom have no effect

span, a, strong, em, code {
  display: inline; /* default for these tags */
}

<p>Text with <strong>bold</strong> and an <a href="#">inline link</a></p>

inline-block — the best of both

• Sits in the line like inline (no line break)
• But respects width, height, padding, and margin like block

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
}

<span class="tag">Python</span>
<span class="tag">FastAPI</span>
<span class="tag">Backend</span>

All three tags appear on the same line, each with its own padding.

none — hide the element

.hidden {
  display: none;  /* element disappears and takes up no space */
}

Differs from visibility: hidden — with display: none the element is removed from the flow entirely; with visibility: hidden the space is preserved.

Default display values by tag

Note: img, button, and input are technically inline-block by default.

Centering a block with margin: auto

The classic way to center a block element horizontally:

.container {
  width: 800px;          /* width must be set */
  max-width: 100%;       /* don't overflow the screen */
  margin-left: auto;
  margin-right: auto;
  /* Shorthand: */
  margin: 0 auto;
}

margin: auto does not work for vertical centering (use Flexbox for that).

When to use what

DevBlog: article tags example

<div class="post-tags">
  <span class="tag">Python</span>
  <span class="tag">FastAPI</span>
  <span class="tag">REST API</span>
</div>

.post-tags {
  margin-top: 12px;
}

.tag {
  display: inline-block;
  padding: 3px 10px;
  margin-right: 6px;
  border-radius: 999px;   /* pill shape */
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 500;
}

Toggling with JavaScript

display is often toggled via JS to show/hide menus or modals:

<div class="mobile-menu" id="menu">
  <a href="/">Home</a>
  <a href="/articles/">Articles</a>
</div>

<button onclick="document.getElementById('menu').style.display = 'block'">
  Open menu
</button>

Or via CSS classes:

.mobile-menu {
  display: none;
}

.mobile-menu.is-open {
  display: block;
}

menu.classList.toggle('is-open');