Categories
CSS (Cascading Style Sheets), the display property is used to control the layout behavior of an HTML element. It defines how an element should be displayed in the document flow, affecting its box type and interaction with other elements.
The display property accepts various values, each influencing the element's rendering on the web page. Here are some common display property values and their explanations:
1. block: Elements with display: block are formatted as block-level elements. They create a rectangular block that takes up the full available width and forces subsequent elements to appear below them. Common block-level elements include <div>, <p>, <h1> to <h6>, <ul>, and <li>.
<div style="display: block; background-color: red; color: white; padding: 10px;">
This is a block-level element. It takes up the full width and creates a rectangular block.
</div>
2. inline: Elements with display: inline are formatted as inline elements. They do not create line breaks and only take up as much width as necessary. Inline elements flow within the text and cannot have a specified width or height. Examples of inline elements include <span>, <a>, and <strong>.
Example
<span style="display: inline; background-color: blue; color: white; padding: 5px;">
This is an inline element. It flows within the text and only takes up as much width as necessary.
</span>
3 - inline-block: This value combines aspects of both inline and block. Elements with display: inline-block are formatted as inline elements, but they can have a specified width and height, similar to block-level elements. This allows them to flow within the text while maintaining block-like properties.
<div style="display: inline-block; background-color: green; color: white; padding: 8px;">
This is an inline-block element. It flows within the text, but you can specify its width and height.
</div>
4. none: Elements with display: none are entirely removed from the document flow and are not rendered on the web page. They take up no space and are effectively invisible. This is commonly used to hide elements dynamically via JavaScript or to hide certain content for specific media queries in responsive design.
<p>This paragraph is visible.</p>
<p style="display: none;">This paragraph is hidden using display: none.</p>
This paragraph is visible.
5. flex: The display: flex property value enables the flexbox layout model. It allows you to create flexible and responsive layouts, distributing space and alignment within a container and its child elements.
<div style="display: flex; background-color: yellow; justify-content: space-between;">
<div style="background-color: orange; padding: 5px;">Flex Item 1</div>
<div style="background-color: purple; padding: 5px;">Flex Item 2</div>
<div style="background-color: pink; padding: 5px;">Flex Item 3</div>
</div>
6. grid: The display: grid property value enables the CSS grid layout model. It provides a powerful way to create two-dimensional layouts, allowing you to define rows and columns to position and align elements in the grid container.
<div style="display: grid; grid-template-columns: repeat(3, 100px); gap: 10px;">
<div style="background-color: lightblue;">Grid Item 1</div>
<div style="background-color: lightgreen;">Grid Item 2</div>
<div style="background-color: lightcoral;">Grid Item 3</div>
</div>