CSS Display

CSS Layout - The display Property

The display property is one of the most fundamental CSS properties for controlling the layout behavior of elements. It specifies how an element is rendered in the document flow.

Understanding Display Values

Every HTML element has a default display value, typically either block or inline, depending on the element type. Understanding these defaults and how to change them is key to manipulating layout.

Common Display Values:

• block: Starts on a new line and takes up the full available width. You can set width, height, margin (top/bottom/left/right), and padding. Examples: <div>, <p>, <h1>-<h6>, <form>, <header>, <footer>, <section>, <li>.
• inline: Flows with the text, does not start on a new line, and only takes up as much width as necessary. width and height properties have no effect. Vertical margin and padding are not fully respected in the layout flow (they don’t push surrounding elements away vertically), while horizontal margin and padding are. Examples: <span>, <a>, <img>, **, <em>.
• inline-block: A hybrid. Flows like an inline element (doesn’t start on a new line) but behaves like a block element regarding width, height, vertical margins, and padding. Useful for placing block-like items next to each other.
• none: The element is completely removed from the document flow. It’s not rendered, takes up no space, and is invisible. Commonly used with JavaScript to hide/show elements.
• flex: Turns the element into a flex container, enabling Flexbox layout for its direct children (flex items). See the Responsive Layout chapter for details.
• grid: Turns the element into a grid container, enabling CSS Grid layout for its direct children (grid items). See the Responsive Layout chapter for details.
• contents: Removes the element’s own box from the layout, but its children behave as if they were direct children of the element’s parent. Can be useful for semantic grouping without affecting layout structure (use with caution, can impact accessibility).

Examples and Use Cases

Block-level Elements:

A <div> naturally takes the full width.

<div style="background-color: lightblue; border: 1px solid blue;">
  I am a div (block-level). I span the full width.
</div>
<div style="background-color: lightcoral; border: 1px solid red; width: 200px;">
  I am a div with a width applied.
</div>

Inline Elements:

A <span> flows within the text.

<p>
  This paragraph contains an inline
  <span style="background-color: yellow; border: 1px solid orange;">span element</span>
  which flows with the text.
</p>

Overriding Default Display:

Changing an element’s display value is common. A classic example was creating horizontal navigation menus from list items.

/* Old approach (using inline or inline-block) */
nav.old-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav.old-menu li {
  display: inline-block; /* Or 'inline' */
  margin-right: 10px;
}

/* Modern approach (using Flexbox on the parent) */
nav.flex-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Make the ul a flex container */
  gap: 10px; /* Space between flex items (li) */
}

/* li elements automatically become flex items */

Using Flexbox (display: flex on the parent <ul>) is generally the preferred modern method for such layouts.

Hiding Elements: display: none vs visibility: hidden

Both display: none; and visibility: hidden; hide an element, but with a key difference:

• display: none;: Removes the element entirely from the layout. It takes up no space.
• visibility: hidden;: Hides the element, but it still occupies its space in the layout. It’s effectively invisible but still affects positioning.

.hide-completely {
  display: none;
}

.hide-but-reserve-space {
  visibility: hidden;
}

Choosing between them depends on whether you want the layout to reflow when the element is hidden.

Summary

The display property is crucial for controlling how elements participate in the page layout. Understanding block, inline, inline-block, none, flex, and grid provides the foundation for building virtually any web layout.

Remember that changing display alters the element’s rendering behavior, not its semantic meaning (e.g., a <span> styled with display: block; is still semantically an inline element).

Explore all display values on MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)