Display Property: Mastering the Core Foundation of CSS Layout

Imagine you're arranging an art gallery. Some artworks need an entire wall to display, like large oil paintings; some small decorations can be placed together with other items in the same display case; and some exhibits may need to be temporarily removed, but the space should be preserved. In the CSS world, the display property is like the exhibition planner, deciding how each element is presented in the "gallery" of the page.

Understanding the Essence of Layout

Before diving into the display property, we need to understand a core concept: in the browser's eyes, every element on a webpage is a rectangular "box". Yes, whether it's text, images, buttons, or entire page sections, browsers treat them all as boxes.

These boxes have different "personalities". Some boxes are particularly domineering, occupying an entire row by themselves and not letting others stand in the same row; some boxes are very easygoing, willing to squeeze together with other boxes; and some boxes are somewhere in between. The display property is used to define these "personalities".

When we say display: block, we're telling the browser: "This box has an independent personality, give it a whole row of space." When we say display: inline, we're saying: "This box is very easygoing, let it squeeze together with other boxes."

Block: The Domineering Element That Occupies an Entire Row

Block Element Behavior

Let's start with the most common display: block. Block elements are like individual shelves, each shelf occupies one floor, even if the shelf is small and there's still a lot of space next to it, the next shelf won't squeeze up, but will stay on the next floor.

When an element is set to display: block, it exhibits the following characteristics: First, it occupies an entire row regardless of how much actual content it has. Second, its width defaults to expanding to 100% of the parent container, unless you explicitly specify a width. Third, you can fully control its dimensions, including width, height, padding, and margin.

<div class="container">
  <div class="block-box">First box</div>
  <div class="block-box">Second box</div>
  <div class="block-box">Third box</div>
</div>

.container {
  width: 800px;
  background-color: #f5f5f5;
  padding: 20px;
}

.block-box {
  display: block;
  width: 300px; /* Explicitly specify width as 300px */
  height: 100px;
  margin: 15px 0; /* Vertical margin is effective */
  padding: 20px; /* Padding in all directions is effective */
  background-color: #2196f3;
  color: white;
  border: 2px solid #1976d2;
}

In this example, even though we set each box's width to 300px, and the container is 800px wide with 500px of remaining space, the second box won't move to the right of the first box, but will stay on the next line. This is the "domineering" nature of block elements - their right to occupy an entire row is inviolable.

Block Element Width Behavior

The width behavior of block elements is particularly noteworthy. If you don't set a width, it will automatically fill the width of the parent container. This "fill" is not simply 100%, but considers padding, border, and margin.

/* Without setting width */
.block-full {
  display: block;
  padding: 20px;
  margin: 10px;
  background-color: #4caf50;
}

The actual width calculation of this .block-full element will make it just fill the parent container, the browser will automatically adjust the content area width so that the entire box (content + padding + border + margin) equals the parent container's width.

But if you explicitly set the width:

.block-fixed {
  display: block;
  width: 400px; /* Explicitly set width */
  padding: 20px;
  margin: 10px;
  background-color: #ff9800;
}

Now, 400px refers to the content area width. The entire box's actual occupied width = 400px (content) + 40px (left and right padding each 20px) + 20px (left and right margin each 10px) = 460px. This often confuses beginners, why does it occupy 460px when set to 400px width?

This brings us to the box-sizing property. By default, box-sizing: content-box, meaning width and height only apply to the content area. If we set box-sizing: border-box:

.block-border-box {
  display: block;
  width: 400px;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box; /* Change box model calculation */
  background-color: #9c27b0;
}

Now, 400px is the entire box's width (including padding and border), the browser will automatically adjust the content area width to fit. This method is more intuitive, so many developers add this to global styles:

* {
  box-sizing: border-box;
}

Common Block Elements

HTML has many elements that are block type by default, such as <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <nav>, etc. These elements inherently have the characteristic of occupying an entire row.

That's why when you write HTML like this:

<p>First paragraph</p>
<p>Second paragraph</p>

The two paragraphs display on separate lines, rather than squeezing together. Because <p> is display: block by default.

Block Element Practical Applications

Block elements are most commonly used to build the main structure of a page, such as content blocks, sidebars, header navigation, etc. When you need an element to occupy an entire row, or need precise control over element dimensions, block is your first choice.

/* Main page layout areas */
.main-content {
  display: block;
  max-width: 1200px;
  margin: 0 auto; /* Classic horizontal centering technique */
  padding: 20px;
}

.sidebar {
  display: block;
  width: 300px;
  margin-top: 20px;
}

.article {
  display: block;
  margin-bottom: 40px;
}

Inline: The Easygoing Element That Flows with Text

The Essence of Inline Elements

If block elements are like independent paragraphs, then inline elements are like words in a paragraph. The design intent of inline elements is to be used within text flow, such as marking certain words in a paragraph of text, making them bold, changing their color or adding links.

Inline elements have a core characteristic: they fully integrate into the text flow. This means they will line up like ordinary text, from left to right, and automatically wrap to the next line when one line can't fit. At the same time, their size is completely determined by content, and you cannot forcibly change their width and height.

<p>
  This is a normal paragraph of text, which contains a
  <span class="highlight">highlighted word</span>, then the text continues, and
  here's <span class="highlight">another highlight</span>, and finally the end.
</p>

.highlight {
  display: inline;
  background-color: #fff59d;
  color: #f57f17;
  padding: 2px 6px; /* Horizontal padding is effective, will expand space */
  border-radius: 3px;
}

In this example, the highlighted words still remain in the text flow, as if they were part of the text. They won't jump to a new line, nor will they interrupt the continuity of the text.

Inline Element Dimension Limitations

Here's a very important but often overlooked feature: inline elements cannot set width and height. More precisely, you can write width: 200px and height: 100px in CSS, but the browser will completely ignore these settings.

.inline-element {
  display: inline;
  width: 200px; /* Invalid! Browser ignores */
  height: 100px; /* Invalid! Browser ignores */
  background-color: #e1f5fe;
}

Why is this? Because the design purpose of inline elements is to integrate into text flow, and the height of text is determined by font size and line height, and width is determined by the amount of text. Allowing inline elements to set arbitrary width and height would disrupt the continuity of the text flow.

Inline Element Padding and Margin

Inline elements handle padding and margin in a special way:

Horizontal (left and right) padding and margin are fully effective, they will push away adjacent content:

.inline-spaced {
  display: inline;
  padding-left: 10px; /* Effective, creates 10px space on the left */
  padding-right: 10px; /* Effective, creates 10px space on the right */
  margin-left: 15px; /* Effective, pushes left content 15px away */
  margin-right: 15px; /* Effective, pushes right content 15px away */
  background-color: #f3e5f5;
}

But vertical (top and bottom) direction is more complex:

• Vertical padding will be displayed (background color and border will extend), but won't push content above and below away
• Vertical margin is completely ineffective, won't even display

.inline-vertical {
  display: inline;
  padding-top: 20px; /* Background extends, but doesn't push above content */
  padding-bottom: 20px; /* Background extends, but doesn't push below content */
  margin-top: 20px; /* Completely ineffective */
  margin-bottom: 20px; /* Completely ineffective */
  background-color: #ffe0b2;
}

Let's look at a more intuitive example:

<div class="text-container">
  <p>First line of text</p>
  <p>
    Second line starts, containing a
    <span class="inline-padded">span with vertical padding</span>
    continues text
  </p>
  <p>Third line of text</p>
</div>

.inline-padded {
  display: inline;
  padding: 30px 10px; /* Top and bottom 30px, left and right 10px */
  background-color: #c5e1a5;
  border: 2px solid #7cb342;
}

You'll see that the span's background color and border extend 30px vertically, but the text position of the first and third lines is completely unaffected, they still maintain the original line spacing. The span's background may even overlap with text on other lines.

Common Inline Elements

HTML elements that are inline by default include: <span>, <a>, <strong>, <em>, <b>, <i>, <small>, <sub>, <sup>, <code>, etc. The common characteristic of these elements is that they're usually used for text markup and emphasis.

Typical Uses of Inline Elements

Inline elements are best suited for text-level markup:

<article>
  <p>
    In CSS, the <code>display</code> property is very important. You can visit
    <a href="https://example.com">MDN documentation</a> for more information.
    Remember,
    <strong
      >understanding concepts is more important than memorizing syntax</strong
    >.
  </p>
</article>

code {
  display: inline;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

a {
  display: inline;
  color: #1976d2;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  display: inline;
  font-weight: bold;
  color: #d32f2f;
}

Inline-Block: The Best of Both Worlds

Why We Need Inline-Block

In actual development, we often encounter this requirement: hoping multiple elements can line up on the same row like inline elements, but also need to be able to set width and height and complete box model properties like block elements. Traditional block and inline cannot meet this requirement, so display: inline-block emerged.

Inline-block can be understood as "externally inline, internally block". Externally, it participates in text flow like an inline element, can line up with other elements on the same row; internally, it's like a block element, can set width, height, padding, margin and all box model properties, and these properties will all take effect normally.

Complete Inline-Block Features

Let's understand inline-block through a complete example:

<div class="button-group">
  <button class="btn">Button 1</button>
  <button class="btn">Button 2</button>
  <button class="btn">Button 3</button>
  <button class="btn btn-large">Large Button</button>
</div>

.button-group {
  background-color: #f5f5f5;
  padding: 20px;
}

.btn {
  display: inline-block; /* Key: use inline-block */
  width: 120px; /* Can set width */
  height: 40px; /* Can set height */
  margin: 5px 10px; /* Margin in all directions is effective */
  padding: 8px 16px; /* Padding in all directions is effective */
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 24px;
}

.btn-large {
  width: 200px; /* Fourth button is wider */
  height: 50px; /* Also taller */
}

.btn:hover {
  background-color: #1976d2;
}

In this example, all buttons will line up horizontally on the same row (provided the container width is enough), each button has its set width and height. If the container width is not enough, the buttons behind will automatically wrap to the next line, but still maintain the horizontal arrangement tendency.

Inline-Block Vertical Alignment

Inline-block elements have a feature that inline elements don't have: you can use the vertical-align property to control vertical alignment.

<div class="align-demo">
  <div class="box box-small">Small box</div>
  <div class="box box-medium">Medium box</div>
  <div class="box box-large">Large box</div>
</div>

.box {
  display: inline-block;
  padding: 10px 20px;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
}

.box-small {
  height: 40px;
  vertical-align: top; /* Top alignment */
}

.box-medium {
  height: 60px;
  vertical-align: middle; /* Middle alignment */
}

.box-large {
  height: 80px;
  vertical-align: bottom; /* Bottom alignment */
}

By default, inline-block elements have vertical-align set to baseline (baseline alignment), which may lead to unexpected alignment effects. In actual development, we usually explicitly set it to top, middle, or bottom.

Inline-Block Gap Problem

Inline-block has a famous problem: mysterious white space gaps appear between elements. This is not a bug, but because spaces and line breaks between elements in HTML are rendered as text nodes.

<!-- Written like this will have gaps -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

.card {
  display: inline-block;
  width: 200px;
  background-color: #fff3e0;
}

There will be approximately 4px gaps between elements (specific size depends on font size). There are several solutions:

Method 1: Set parent element font size to 0

.container {
  font-size: 0; /* Eliminate white space node effect */
}

.card {
  font-size: 16px; /* Restore font size in child elements */
  display: inline-block;
  width: 200px;
}

Method 2: Remove spaces from HTML

<!-- Method 1: Write on one line -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

<!-- Method 2: Use comments -->
<div class="card">Card 1</div>
<!--
-->
<div class="card">Card 2</div>
<!--
-->
<div class="card">Card 3</div>

<!-- Method 3: Don't close tags (not recommended) -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

Method 3: Use negative margin

.card {
  display: inline-block;
  margin-right: -4px; /* Use negative margin to offset gap */
  width: 200px;
}

Inline-Block Practical Applications

Inline-block is particularly useful in the following scenarios:

1. Horizontal navigation menu

.nav {
  background-color: #333;
  text-align: center;
  font-size: 0; /* Solve gap */
}

.nav-item {
  display: inline-block;
  font-size: 16px; /* Restore font */
  padding: 15px 25px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #555;
}

2. Image gallery

.gallery {
  text-align: center;
  font-size: 0;
}

.gallery-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 10px;
  font-size: 14px;
  vertical-align: top;
}

3. Tag cloud

.tag-cloud {
  padding: 20px;
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  margin: 4px;
  background-color: #e0e0e0;
  border-radius: 15px;
  font-size: 14px;
}

Display: None — Making Elements Completely Disappear

How None Works

When we set display: none, the element is completely removed from the render tree. This means the element is not only invisible, but also doesn't occupy any space, as if the element never existed. The page layout is recalculated as if the element was deleted.

<div class="content">
  <div class="box">Visible box 1</div>
  <div class="box hidden">Hidden box</div>
  <div class="box">Visible box 2</div>
</div>

.box {
  padding: 20px;
  margin: 10px;
  background-color: #e3f2fd;
  border: 2px solid #2196f3;
}

.hidden {
  display: none;
}

In the browser, you'll only see "Visible box 1" and "Visible box 2", with no gap between them, as if the middle box doesn't exist.

Differences Between Three Hiding Methods

There are three commonly used methods to hide elements in CSS, with completely different effects:

1. display: none

The element is completely removed from the document flow, doesn't occupy space, cannot be clicked, cannot be read by screen readers.

.method-display {
  display: none;
}

2. visibility: hidden

The element becomes transparent but still occupies space. Imagine an invisible person sitting on a chair, you can't see them, but the chair is indeed occupied.

.method-visibility {
  visibility: hidden;
}

<div>First box</div>
<div class="method-visibility">Invisible box</div>
<div>Third box</div>

You'll see a blank area between "First box" and "Third box", that's the space occupied by the invisible box.

3. opacity: 0

The element is completely transparent but still occupies space and can still receive mouse events.

.method-opacity {
  opacity: 0;
  cursor: pointer;
}

.method-opacity:hover {
  opacity: 1; /* Display on hover */
}

Comparison of three methods:

Feature	display: none	visibility: hidden	opacity: 0
Occupies space	No	Yes	Yes
Responds to events	No	No	Yes
Affects layout	Yes	No	No
Can be animated	No	Yes	Yes
Children can display	No	Yes	No

Display: None Practical Applications

1. Modal show/hide

<div class="modal" id="myModal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>This is a modal</h2>
    <p>Modal content...</p>
  </div>
</div>

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal.active {
  display: block; /* Show when active */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
}

const modal = document.getElementById("myModal");
const openBtn = document.querySelector(".open-btn");
const closeBtn = document.querySelector(".close");

// Open modal
openBtn.addEventListener("click", () => {
  modal.classList.add("active");
});

// Close modal
closeBtn.addEventListener("click", () => {
  modal.classList.remove("active");
});

// Click background to close
modal.addEventListener("click", (e) => {
  if (e.target === modal) {
    modal.classList.remove("active");
  }
});

2. Element show/hide in responsive layout

/* Mobile menu */
.mobile-menu {
  display: block;
}

.desktop-menu {
  display: none;
}

/* Desktop */
@media (min-width: 768px) {
  .mobile-menu {
    display: none; /* Hide mobile menu on desktop */
  }

  .desktop-menu {
    display: block; /* Show desktop menu on desktop */
  }
}

3. Tab switching

<div class="tabs">
  <button class="tab-btn active" data-tab="tab1">Tab 1</button>
  <button class="tab-btn" data-tab="tab2">Tab 2</button>
  <button class="tab-btn" data-tab="tab3">Tab 3</button>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content 1</div>
  <div class="tab-pane" id="tab2">Content 2</div>
  <div class="tab-pane" id="tab3">Content 3</div>
</div>

.tab-pane {
  display: none;
  padding: 20px;
  background-color: #f5f5f5;
}

.tab-pane.active {
  display: block;
}

.tab-btn.active {
  background-color: #2196f3;
  color: white;
}

Display Value Selection Guidelines

In actual development, how should you choose a display value? Here are some guiding principles:

Scenarios for Using Block

• Need element to occupy entire row
• Need precise control over element dimensions
• Building main page structure areas
• Need to set complete box model properties

/* Examples suitable for block */
.main-content,
.sidebar,
.footer,
.article-section {
  display: block;
}

Scenarios for Using Inline

• Text-level markup and emphasis
• Don't need to interrupt text flow
• Don't need to set width and height

/* Examples suitable for inline */
.highlight-text,
.inline-code,
.link-text {
  display: inline;
}

Scenarios for Using Inline-Block

• Need elements to arrange horizontally
• Need to set element width and height
• Simple navigation menus
• Button groups

/* Examples suitable for inline-block */
.nav-item,
.tag,
.button {
  display: inline-block;
}

Summary

The display property is the foundation of CSS layout, understanding the characteristics of different values is crucial for mastering CSS layout.

Core Display Values:

• block: Occupies entire row, can set width and height, used for building page structure
• inline: Integrates into text flow, cannot set width and height, used for text-level markup
• inline-block: Combination of both, can arrange horizontally and set width and height
• none: Completely hidden, doesn't occupy space

Selection Principles:

• Use inline for simple text markup
• Use block for page structure areas
• Consider inline-block for horizontally arranged small components
• Use none to control display and hide

Key Points:

• ✅ Understand the concepts of box model and document flow
• ✅ Master the applicable scenarios of different display values
• ✅ Pay attention to inline-block gap problems
• ✅ Understand the differences between three hiding methods

In modern web development, although Flexbox and Grid have become mainstream layout solutions, understanding traditional display values is still important because they are the foundation for understanding CSS layout, and in some scenarios they are still the best choice.

For more powerful modern layout techniques Flexbox and Grid, we will explain them in detail in subsequent chapters.