CSS Display Property (original) (raw)

<style>
    #geeks1 {
        height: 100px;
        width: 200px;
        background: teal;
        display: block;
    }

    #geeks2 {
        height: 100px;
        width: 200px;
        background: cyan;
        display: block;
    }

    #geeks3 {
        height: 100px;
        width: 200px;
        background: green;
        display: block;
    }

    .gfg {
        margin-left: 20px;
        font-size: 42px;
        font-weight: bold;
        color: #009900;
    }

    .geeks {
        font-size: 25px;
        margin-left: 30px;
    }

    .main {
        margin: 50px;
        text-align: center;
    }
</style>

GeeksforGeeks

display: block; property

elements. It places them vertically, one after another. You can adjust the height and width of a block-level element.

CSS `

#geeks1 { background: teal; display: block; } #geeks2 { background: cyan; display: block; } #geeks3 { background: green; display: block; }

`

**Output:

2. Using Inline Display

Use this property to display an element inline. It doesn’t start a new line and respects the content flow.

CSS `

#geeks1 { background: teal; display: inline; } #geeks2 { background: cyan; display: inline; } #geeks3 { background: green; display: inline; }

`

**Output:

3. Using Display Inline-block

Combining characteristics of both block and inline, this value allows elements to flow inline while still having block-level properties. It’s useful for creating responsive layouts.

CSS `

#geeks1 { background: teal; display: inline-block; } #geeks2 { background: cyan; display: inline-block; } #geeks3 { background: green; display: inline-block; }

`

**Output:

4. Using Display None

This property hides the div or the container which use this property. Using it on one of the div it will make working clear.

CSS `

#geeks2 { background: cyan; display: none; }

`

**Output: Display none property on block 2

5. Using Display Flex and Display Grid

Flexbox and Grid are modern CSS layout systems used to create flexible and structured layouts.

• **Flexbox: Best for one-dimensional layouts (row or column).
• **Grid: Ideal for two-dimensional layouts (rows and columns).

Display Property Values

for all elements. for all elements.

for all elements.

**Value	**Description
inline	Used to display an element as an inline element.
block	Used to display an element as a block element
contents	Used to disappear the container.
flex	Used to display an element as a block-level flex container.
grid	Display an element as a block-level grid container.
inline-block	Display an element as an inline-level block container.
inline-flex	Display an element as an inline-level flex container.
inline-grid	Display an element as an inline-level grid container.
inline-table	It is used to display an inline-level table
list-item	It is used to display all the elements in element.
run-in	It is used to display an element inline or block level, depending on the context.
table	It is used to set the behavior as for all elements.
table-caption	It is used to set the behavior as
table-column-group	Set the behavior as for all elements.
table-header-group	Set the behavior as for all elements.
table-footer-group	Set the behavior as
table-row-group	It is used to set the behavior as for all elements.
table-cell	It is used to set the behavior as	for all elements.
table-column	It is used to set the behavior as
table-row	To set the behavior as
none	Used to remove the element.
initial	Used to set the default value.
inherit	Used to inherit property from its parents' elements.