Controlling Layout: Understanding the CSS 'display' Property

Master the flow and structure of your webpage by understanding the core differences between block, inline, and inline-block elements.

Welcome! Let's explore how the 'display' property controls the layout of elements on a webpage.

/* Our layout canvas is ready! */

Display: block

Elements with display: block; start on a new line and take up the **full width available**. Think of them as building blocks that stack vertically. Common block elements include <div>, <p>, and <h1>. You can control their width, height, and margin.

Display: inline

display: inline; elements **do not start on a new line** and only take up as much width as their content needs. They flow along with text. Examples include <span>, <a>, and <strong>. Importantly, you **cannot** set a width or height on inline elements.

Display: inline-block

display: inline-block; is the best of both worlds. These elements flow like inline elements (they don't force a new line), but you **can set a `width` and `height`** on them, just like block elements. This is extremely useful for things like navigation menus or buttons.

Display: none

Using display: none; will **completely remove the element** from the page. It won't take up any space, and it's as if it never existed in the HTML. This is different from visibility: hidden;, which hides the element but still reserves its space in the layout.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

display: inline-block;

display: block;

display: inline;

Completa el código:

Takes up the full available width, creating line breaks before and after.______

Only takes up the space needed for its content and does not force line breaks.______

Combines features of inline and block, allowing width and height to be set without line breaks.______

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.menu-item {
  /* Make it flow inline but allow sizing */
  display: ;
  width: 100px;
}

Unlock with Premium

Practice Example: Code Editor

Style the `div` with the class `block-element` to take up the full width. Style the `span` with `inline-element` to only take up necessary space. Make the button with `sized-inline` have a specific width and height while remaining on the same line. Finally, hide the element with class `hidden-element`.

CSS Display Types

Display	Description
display: block;	The element takes up the full available width, starting on a new line.
display: inline;	The element does not start on a new line and only takes up the necessary width.
display: inline-block;	The element does not start on a new line, but allows its width and height to be set.
display: none;	Completely hides the element, without reserving space in the layout.

* Write your CSS code and apply it to see the results.

Results:

Unlock with Premium

Knowledge Check

Which 'display' value makes an element take up the entire available width?

Unlock with Premium

← Previous Next →

Practical Uses of the 'display' Property

The display property is a cornerstone of CSS layout. Understanding its practical applications is key to building well-structured, responsive websites. Let's explore some common scenarios.

1. Building a Horizontal Navigation Menu

A common task is to turn a vertical list of links (<ul>, <li>) into a horizontal navigation bar. By setting display: inline-block; on the list items, they will line up horizontally while still allowing for padding and margin.

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

2. The "Invisible" Space of `inline-block`

A quirky feature of inline-block is that it respects whitespace in your HTML, which can create small, unwanted gaps between elements. A common fix is to set font-size: 0; on the parent container and reset it on the children.

.container {
  font-size: 0;
}
.item {
  display: inline-block;
  font-size: 1rem; /* Reset font size */
  width: 33.3%;
}

3. Hiding Elements for Mobile

display: none; is essential for responsive design. You can hide elements that don't fit on smaller screens, like a full sidebar, by using it inside a media query.

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

This effect is active on screens less than 600px wide.

Practical Takeaway: Choose the right display value for the job. Use block for main layout sections, inline-block for menu items and buttons, and inline for text-level elements. Master this, and you master CSS layout.