CSS Display Property

Understanding the Display Property

The CSS display property is a fundamental property that determines how an element is rendered and how it interacts with other elements in the document flow. It specifies the type of box an element generates, how it is laid out, and how it relates to other elements.

The display property has several possible values, each with its unique behavior. The most commonly used values are `block`, `inline`, and `inline-block`. Elements with `display: block` generate a block-level box, which starts on a new line and takes up the full width available. Examples of block-level elements are : `<div>`, `<p>`, and `<h1>` to `<h6>`.

On the other hand, elements with `display: inline` generate an inline-level box, which does not start on a new line and only takes up as much width as necessary to fit its content. Inline elements flow with the text and can be nested within other inline elements. Examples of inline elements are: `<span>`, `<a>`, and `<strong>`.

The `display: inline-block` value combines the characteristics of both inline and block elements. An inline-block element flows with the text like an inline element but can have a specified width, height, padding, and margin like a block element. This allows for more flexible layout options.

Apart from these basic values, the display property also supports more advanced layout models, like `flex` and `grid`. `display: flex` enables the creation of flexible containers that can control the layout and alignment of their child elements. It provides a powerful way to create responsive and dynamic layouts. Similarly, `display: grid` allows for the creation of grid-based layouts, where elements can be placed in rows and columns with precise control over their sizing and positioning.

Other display property values, such as `table`, `table-row`, `table-cell`, and `list-item`, are used to create table-like structures or display elements as list items with bullet points or numbers.

Syntax

The display property in CSS specifies how a particular HTML element should be displayed. It has several values that dictate the layout behavior of these elements. 

Syntax of the display property :

selector {
  display: value;
}

Here, selector refers to the HTML element you want to apply the CSS rule to, and value is one of the potential settings for display, such as block, inline, inline-block, none, and others.

For example, if you want to set a <div> element to not appear on the webpage at all, you would write:

div {
  display: none;
}

This basic syntax can be applied to any HTML element to control its display type, offering a flexible way to manipulate the presentation of components across your web pages.

Property Values

The display property in CSS comes with a variety of values, each serving different purposes that affect the layout and visibility of elements within a webpage. Let’s look at some of the commonly used values:

1. block: This value makes the element behave like a block-level element, starting on a new line and taking up the full width available. For instance, <div> and <p> are block-level elements by default.
    
2. inline: Elements with display: inline; do not start on a new line. They only occupy as much width as necessary. This is typical for elements like <span>.
    
3. inline-block: Combining the characteristics of both inline and block, this value allows elements to sit inline but retain block-like properties such as setting width and height.
    
4. none: Using this value hides the element from the page, meaning it will not be displayed at all, and the document is rendered as though the element does not exist.
    
5. flex: This value turns the element into a flexible container, enabling the use of flexbox layout features to align and distribute child elements within.
    
6. grid: Similar to flex, grid makes an element a grid container that allows the use of all the grid layout features for a two-dimensional layout design.

Example

CSS Display Property Examples

1. Using Display Block

Here's how you can make an inline element like a <span> behave like a block element:

<!-- HTML -->

<span>This is a block-level span!</span>

/* CSS */

span {

  display: block;

  background-color: yellow;

  margin: 5px;

  padding: 5px;

}

Output

This code will make the <span> take up the full width available, similar to a <div>, and allows it to hold margin and padding settings like a block-level element.

2. Using Inline Display

Converting a block-level element like <div> to behave as an inline element:

<!-- HTML -->

<div>This div is now inline.</div>

/* CSS */

div {

  display: inline;

  background-color: lightblue;

}

Output

This will allow the <div> to only occupy as much space as it needs, not stretching to the full width of the container.

3. Using Display Inline-block

An example to show a list of items inline with the ability to define dimensions:

<!-- HTML -->

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

/* CSS */

li {

  display: inline-block;

  width: 100px;

  background-color: pink;

  margin: 5px;

  text-align: center;

}

Output

This arrangement displays list items side by side but with specified dimensions, combining the inline property of not breaking onto a new line with the block property of applying width and height.

4. Using Display None

Hiding an element from the page:

<!-- HTML -->

<div>This div will not be shown.</div>

/* CSS */

div {

  display: none;

}

Output

This setting completely removes the element from the document flow, and it won't affect the layout of other elements.

Supported Browsers

The CSS display property is widely supported across all major browsers, ensuring that the styles you apply using this property work consistently no matter where your website is viewed. Let’s talk about various famous browsers:

1. Google Chrome: Supports all values of the display property, including newer values like flex and grid, from early versions onward.
    
2. Mozilla Firefox: Offers support for all standard display settings, with comprehensive compatibility for newer layout models.
    
3. Apple Safari: Includes full support for both traditional and modern display values, ensuring good performance on iOS and macOS devices.
    
4. Microsoft Edge: Recent versions of Edge, which are based on Chromium, support the full range of display values, mirroring the support found in Chrome.
    
5. Internet Explorer: While generally supportive of basic display values like block, inline, and none, Internet Explorer has limited or no support for newer values such as flex and grid. It's advisable to use fallbacks or alternative layout methods for compatibility.

Frequently Asked Questions

What happens if I set an element to display: none?

Setting an element to display: none removes it from the document flow, meaning it will not occupy any space and will be completely invisible to users, as if it were not part of the document at all.

Can display: inline-block elements have margins and padding?

Yes, elements set to display: inline-block can indeed have margins and padding. This property combines the layout features of both inline and block elements, allowing you to manage spacing while keeping elements in line.

Is there a difference in browser support between display: flex and display: grid?

Display: flex is generally more widely supported across older versions of browsers compared to display: grid. While modern browsers support both, older browsers like Internet Explorer have limited support for grid and it is recommended to check compatibility or provide fallbacks.

Conclusion

In this article, we have learned about the CSS display property, its syntax, various values, practical examples, and browser support. This property is integral to controlling layout and visibility in web design, allowing developers to precisely manipulate how elements are displayed. 

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.