Controlling Flow: Display and Visibility in CSS

Learn to control element layout and visibility with the essential `display` and `visibility` properties.

Welcome! Let's explore how CSS controls where elements appear on a page.

/* Our layout journey begins! */

Block vs. Inline

The display property is fundamental. Block-level elements (like <div>, <p>) start on a new line and take up the full width available. Inline elements (like <span>, <a>) sit alongside each other and only take up as much width as their content.

The Hybrid: inline-block

display: inline-block; is a hybrid. Elements flow horizontally like inline elements, but you can control their width, height, margin, and padding just like block-level elements. It's perfect for things like navigation buttons.

Hiding Elements: `none` vs. `hidden`

Hiding elements is common. display: none; removes the element from the page entirely—it takes up no space. In contrast, visibility: hidden; makes the element invisible but it still occupies its original space in the layout, leaving a gap.

Modern Layouts: Flex & Grid

For modern, complex layouts, we now use display: flex; and display: grid;. These powerful values turn an element into a container that can arrange its children in sophisticated ways, making responsive design much easier to manage.

Practice Zone

Interactive Test 1: Match the Type

Arrastra en el orden correspondiente.

Arrastra las opciones:

inline

none

block

Completa el código:

Takes up the full width and starts on a new line.______

Flows with text and takes minimal width.______

Removes the element from the layout.______

Unlock with Premium

Interactive Test 2: Fill in the Properties

Rellena los huecos en cada casilla.

.hide-but-keep-space {
  visibility: ;
}
.remove-completely {
  display: ;
}

Unlock with Premium

Practice Example: Code Editor

The three boxes below are `div` elements, which are `display: block` by default. Change their display property so they sit side-by-side.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

Unlock with Premium

Knowledge Check

Which property hides an element but preserves the space it occupies in the layout?

Unlock with Premium

← Previous Next →

A Practical Guide to Structuring Content

Mastering `display` and `visibility` is the first step toward building any web layout, from simple blogs to complex applications. Here are some real-world examples.

1. Building a Horizontal Navigation Bar

By default, list items (`<li>`) are block-level. To create a horizontal menu, we can set them to `display: inline-block`. This lets them sit side-by-side while still allowing for padding.

nav ul li {
  display: inline-block;
  padding: 10px 15px;
}

2. Creating a Simple Card Grid

For card layouts, `display: grid` is the modern solution. It allows you to easily define columns and gaps, creating a perfectly aligned, responsive grid with minimal code.

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

3. Conditionally Showing Elements

In JavaScript applications, you often need to show or hide elements based on state. A common pattern is to toggle a class that sets `display: none` to completely remove an element, like a modal or an alert.

.is-hidden {
  display: none;
}

This is an alert.

Practical Takeaway: Choose your property wisely. Use `display` to alter layout and flow. Use `visibility` when you need to hide an element but preserve its space, often for animations or preserving layout structure.