@codeswithpankaj

CSS Display

By Codes With Pankaj

The display property in CSS is one of the most important and widely used properties for controlling the layout of elements on a webpage. It determines how an element is displayed on the page, whether it's as a block, inline, flex, grid, or something else. Understanding how to use the display property effectively is crucial for creating well-structured and responsive designs. This tutorial will cover the different display values, how they work, and provide practical examples.

Table of Contents

  1. What is the CSS Display Property?

  2. Common Display Values

    • Block

    • Inline

    • Inline-Block

    • None

  3. Advanced Display Values

    • Flex

    • Grid

    • Inline-Flex

  4. Understanding Display Context

  5. Practical Examples

    • Example 1: Block vs Inline

    • Example 2: Using Inline-Block for Layouts

    • Example 3: Creating a Flexbox Layout

    • Example 4: Creating a Grid Layout

  6. Conclusion

1. What is the CSS Display Property?

The display property in CSS specifies the display behavior (the type of rendering box) of an element. It determines how an element will be visually formatted and whether it will be treated as a block, inline, flex, grid, or something else.

Syntax:

selector {
  display: value;
}

Common Values:

  • block

  • inline

  • inline-block

  • none

Advanced Values:

  • flex

  • grid

  • inline-flex

  • inline-grid

Each of these values has different effects on how an element behaves and interacts with other elements on the page.

2. Common Display Values

Let's start with the basic and most commonly used display values.

a. Block

An element with display: block takes up the full width available and starts on a new line. Block-level elements typically include <div>, <p>, <h1> to <h6>, <header>, and <footer>.

Example:

.block-element {
  display: block;
  width: 100%;
  background-color: lightblue;
}

Behavior:

  • Takes up the entire width of its parent container.

  • Stacks vertically, one after the other.

Use Cases:

  • Structuring page layout elements like sections, headers, and footers.

b. Inline

An element with display: inline takes up only as much width as its content requires and does not start on a new line. Inline elements include <span>, <a>, <strong>, and <em>.

Example:

.inline-element {
  display: inline;
  background-color: lightgreen;
}

Behavior:

  • Takes up only as much width as necessary.

  • Flows with the surrounding content.

Use Cases:

  • Styling text or creating links within a block of text.

c. Inline-Block

The inline-block value allows an element to behave like an inline element (flowing within text) while still respecting block-level properties like width and height.

Example:

.inline-block-element {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: lightcoral;
}

Behavior:

  • Takes up only as much width as specified but allows other inline elements to sit beside it.

  • Can set width and height properties.

Use Cases:

  • Creating navigation menus, aligning elements side by side.

d. None

The display: none value hides an element completely, removing it from the document flow. The space that would have been occupied by the element is not retained.

Example:

.hidden-element {
  display: none;
}

Behavior:

  • The element is hidden and does not take up any space on the page.

Use Cases:

  • Hiding elements dynamically with JavaScript or based on user interactions.

3. Advanced Display Values

Beyond the basic values, CSS offers more advanced display properties that are essential for modern web design.

a. Flex

The flex value is used to create a flexible box layout, allowing elements within a container to be automatically arranged based on their size and the available space. Flexbox is highly useful for creating responsive layouts.

Example:

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

Behavior:

  • Items are arranged in a row (or column if specified).

  • Items can grow, shrink, and be spaced according to the container’s size.

Use Cases:

  • Creating responsive layouts, aligning items horizontally or vertically.

b. Grid

The grid value is used to create a grid layout, which allows you to define rows and columns and place items precisely within this grid. CSS Grid is powerful for building complex layouts.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-item {
  background-color: lightyellow;
  padding: 20px;
}

Behavior:

  • Items are placed in a grid according to the specified rows and columns.

  • Provides fine-grained control over layout and positioning.

Use Cases:

  • Creating complex page layouts, dashboard designs, and responsive grids.

c. Inline-Flex

The inline-flex value is similar to flex, but the container itself behaves like an inline element. It can flow with text and other inline elements.

Example:

.inline-flex-container {
  display: inline-flex;
  background-color: lightblue;
}

.inline-flex-item {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

Behavior:

  • Behaves like an inline element but still allows for flexbox behavior inside the container.

Use Cases:

  • Creating flexible components that fit inline with text, like inline navigation menus.

4. Understanding Display Context

The display property interacts with the document’s flow, affecting how elements are positioned and how they affect their surroundings. Understanding the context in which a display value is used is essential for achieving the desired layout.

  • Block Context: Elements that take up the full width and start on a new line.

  • Inline Context: Elements that flow within text and do not disrupt the document flow.

  • Flex/Grid Context: Elements that are part of a flexible or grid layout, enabling complex designs with minimal code.

5. Practical Examples

Let’s see how these display values work with some hands-on examples.

Example 1: Block vs Inline

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block vs Inline Example - codeswithpankaj</title>
  <style>
    .block-element {
      display: block;
      background-color: lightblue;
      padding: 10px;
      margin-bottom: 10px;
    }
    
    .inline-element {
      display: inline;
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>

<div class="block-element">This is a block element.</div>
<span class="inline-element">This is an inline element.</span>
<span class="inline-element">This is another inline element.</span>

</body>
</html>

Explanation:

  • The block element takes up the full width and pushes other content to the next line.

  • Inline elements flow within the text, allowing multiple elements to sit on the same line.

Example 2: Using Inline-Block for Layouts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline-Block Layout Example - codeswithpankaj</title>
  <style>
    .inline-block-element {
      display: inline-block;
      width: 150px;
      height: 100px;
      background-color: lightcoral;
      margin: 5px;
    }
  </style>
</head>


<body>

<div class="inline-block-element">Box 1</div>
<div class="inline-block-element">Box 2</div>
<div class="inline-block-element">Box 3</div>

</body>
</html>

Explanation:

  • Inline-block elements allow for block-like properties (width, height) while still flowing with other inline elements on the same line.

Example 3: Creating a Flexbox Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout Example - codeswithpankaj</title>
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      background-color: lightpink;
      padding: 10px;
    }

    .flex-item {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      margin: 5px;
    }
  </style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

</body>
</html>

Explanation:

  • The flexbox layout automatically adjusts the spacing between items, making it easy to create responsive and flexible layouts.

Example 4: Creating a Grid Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example - codeswithpankaj</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background-color: lightgray;
      padding: 10px;
    }

    .grid-item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">Grid 1</div>
  <div class="grid-item">Grid 2</div>
  <div class="grid-item">Grid 3</div>
  <div class="grid-item">Grid 4</div>
  <div class="grid-item">Grid 5</div>
  <div class="grid-item">Grid 6</div>
</div>

</body>
</html>

Explanation:

  • The grid layout allows precise control over the placement and spacing of items, making it ideal for complex page designs.

6. Conclusion

The display property in CSS is a cornerstone of web design, determining how elements are rendered and how they interact with each other on the page. By mastering the different display values—block, inline, inline-block, flex, grid, and more—you can create layouts that are both visually appealing and functionally robust.

  • Block: For elements that need to take up the full width and stack vertically.

  • Inline: For elements that flow within text without disrupting the layout.

  • Inline-Block: For elements that need to behave like blocks but align inline.

  • Flex/Grid: For creating responsive, flexible, and complex layouts.

By understanding and applying these concepts, you can build more effective and adaptable web designs.

For more tutorials and insights, visit Codes With Pankaj.

PreviousCSS UnitsNextCSS Visibility

Last updated