CSS Tutorial

CSS Display

The CSS display property determines how an element is displayed in the document. It controls the layout behavior of an element, defining whether it is a block, inline, flex container, grid container, or even hidden. Proper use of the display property ensures efficient and visually appealing layouts.

Key Points on CSS Display:

The display property is fundamental for controlling the box model and layout of elements.
It has several values, including block, inline, inline-block, flex, grid, none, and more.
By default, most HTML elements have predefined display values (e.g., div is block, span is inline).
Setting display: none; hides the element and removes it from the layout flow.
Values like flex and grid enable advanced layouts and responsive design.
The inherit value applies the parent element's display property to the child element.
Combining the display property with others like position and visibility provides extensive layout control.

Property	Value
default value	inline
inherited	no
animation supporting	no
version	CSS1
JavaScript syntax	object.style.display="none"

Syntax for CSS Display Property:

Syntax Example


        /* Syntax for CSS display property */
        .element {
            display: value;
                 }
        
        /* Example */
        .div {
            display: flex;
             }

Examples of CSS Display Properties:

The following examples demonstrate various values of the display property:

Code Example: Display Block


            .div {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 5px 0;
                 }

Output

This is a block-level element.

Code Example: Display Inline


            .span {
            display: inline;
            background-color: green;
            padding: 5px;
                  }

Output

This is inline text.

Code Example: Display Flex


            .div {
            display: flex;
            gap: 10px;
            background-color: lightgray;
            padding: 10px;
                 }
        
           .div > span {
            background-color: lightpink;
            padding: 10px;
                       }

Output

Flex Item 1 Flex Item 2

Code Example: Display None


            .div {
            display: none;
                 }

Output

The above content is hidden because of display: none;.

Common Display Values:

block: The element is displayed as a block, taking up the full width available.
inline: The element is displayed inline, not breaking the flow of text.
inline-block: Combines the properties of inline and block elements.
flex: Enables flexible layouts using the Flexbox model.
grid: Enables grid-based layouts for precise placement of elements.
none: Hides the element from the layout.
table: Renders the element as a table.
inherit: Inherits the display value from the parent element.
initial: Resets to the default display value.

Use the display property strategically to create efficient and responsive layouts. For complex designs, combine it with other properties like align-items, justify-content, and position.