CSS display Property

Posted in CSS Tutorial

Updated on Aug 06, 2024

By Mari Selvan

👁️ 41 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The display property in CSS is one of the most powerful and commonly used properties. It specifies the display behavior of an element, determining how an element is displayed on the web page.

The display property can change an element's box type, enabling it to switch between being a block-level element, an inline element, or even not being displayed at all.

💡 Syntax

The syntax for the display property is simple and can be applied to any HTML element.

Syntax

Copied

element {
  display: value;
}

🎛️ Default Value

The default value of the display property depends on the HTML element. For example, the default value for a <div> element is block, while the default value for a <span> element is inline.

🏠 Property Values

Value	Description
block	The element generates a block-level box.
inline	The element generates an inline-level box.
inline-block	The element generates a block box that will be flowed with surrounding content as an inline box.
none	The element is completely removed from the document flow and will not be displayed.
flex	The element generates a block-level flex container box.
inline-flex	The element generates an inline-level flex container box.
grid	The element generates a block-level grid container box.
inline-grid	The element generates an inline-level grid container box.
table	The element generates a block-level table box.
inline-table	The element generates an inline-level table box.
list-item	The element generates a block-level box formatted as a list item.
run-in	The element generates a block or inline box, depending on context.
initial	Sets the property to its default value.
inherit	Inherits the property value from its parent element.

📄 Example

In this example, we'll demonstrate the display property by changing a block-level <div> to an inline element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS display Property Example</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>
  <h1>Display Property Example</h1>
  <div class="block-element">I am a block element</div>
  <div class="inline-element">I am an inline element</div>
</body>
</html>

🖥️ Browser Compatibility

The display property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental property in CSS, and its various values are widely recognized across different browser versions. Testing your website across different browsers is always recommended to ensure consistent behavior.

🎉 Conclusion

The display property is an essential tool for web developers, providing control over how elements are rendered on a page.

By understanding and using the different values of the display property, you can create complex and responsive layouts. Experiment with different display values to see how they can affect the layout and presentation of your web projects.