CSS Display

CSS Display and Visibility

Understanding how elements are displayed and their visibility is crucial for controlling layout and appearance in CSS.

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

The visibility property specifies whether an element is visible or hidden, but hidden elements still affect the layout.

Hiding Elements: display: none vs. visibility: hidden

display: none removes the element entirely from the document flow. It will not take up any space, and the page will be rendered as if the element does not exist.

.hide-with-display {
  display: none;
}

visibility: hidden hides the element, but it still occupies its space in the layout. The page layout will be affected as if the element were there, but it just won’t be visible.

.hide-with-visibility {
  visibility: hidden;
}

Key Difference: Use display: none when you want to completely remove an element and have the layout adjust accordingly. Use visibility: hidden when you need to hide an element but preserve the space it occupies.

Common display Property Values

Block-level Elements (display: block)

A block-level element always starts on a new line and takes up the full width available by default (stretches out to the left and right as far as it can within its container). You can set width, height, margin, and padding on block-level elements.

Examples of default block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
• <li>

Inline Elements (display: inline)

An inline element does not start on a new line and only takes up as much width as necessary to fit its content. You cannot set width or height on inline elements (or if you do, they are often ignored). Vertical margin and padding might behave unexpectedly.

This is an inline <span> element inside a paragraph.

Examples of default inline elements:

• <span>
• <a>
• <img>
• **
• <em>

Inline-block Elements (display: inline-block)

An inline-block element is like a hybrid. It flows with the text like an inline element (doesn’t start on a new line), but you can set its width, height, margin, and padding like a block-level element.

This is useful for creating elements like buttons or small boxes that should sit next to each other but also have defined dimensions.

.inline-block-example {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Other Important Display Values

display: flex: Enables Flexbox layout for an element’s direct children. This is a powerful tool for creating one-dimensional layouts (rows or columns).

display: grid: Enables CSS Grid layout for an element’s direct children. Ideal for creating complex two-dimensional layouts.

display: contents: Causes the element itself to not generate any boxes, making its children behave as if they were direct children of the element’s parent. Use with caution as it can affect accessibility.

Changing an Element’s Default Display Type

You can change the default display type of an element. For example, making list items inline-block for a horizontal menu:

li {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  background-color: #f0f0f0;
}

/* Or making span elements behave like blocks: */
span.block-span {
  display: block;
  background-color: lightgreen;
  padding: 10px;
  margin-bottom: 5px;
}

Note: Changing the display property only affects how the element is rendered visually and interacts with the layout. It does not change the element’s semantic meaning or its allowed content model (e.g., an inline element like <span> set to display: block should still not contain block-level elements according to HTML rules, though browsers might render it).

Practical Application: Toggling Content Visibility

JavaScript is often used to dynamically change the display property (e.g., from none to block) to show or hide elements like dropdown menus, modals, or collapsible sections. This is a common pattern for interactive user interfaces.