CSS display Property

The display property specifies the display behavior (the type of rendering box) of an element.

• The display property sets an element's inner and outer display types.
• The Display property defines how the components will be placed on the web page.

we will use different classes in the class attribute in span tag.

Different display values with output

• inline - It is used to display an element as an inline element.
.inline {
display: inline;
border: 1px solid red
}


• block - It is used to display an element as a block element.
.inline {
display: block;
border: 1px solid red
}


• flex - It is used to display an element as a block-level flex container.
.inline {
display: flex;
border: 1px solid red
}


• grid- It is used to display an element as a block-level grid container.
.grid {
display: grid;
border: 1px solid red
}


• inline-block - It is used to display an element as an inline-level block container.
.inline-block {
display: inline-block;
border: 1px solid red
}


• inline-flex- It is used to display an element as an inline-level flex container.
.inline-flex {
display: inline-flex;
border: 1px solid red
}


• inline-grid - It is used to display an element as an inline-level grid container.
.inline-grid {
display: inline-grid;
border: 1px solid red
}


• block-grid- It is used to display an element as a block-level grid container.
.block-grid {
display: block-grid;
border: 1px solid red
}


• none - It is used to remove the element.
.none {
display: none;
border: 1px solid red
}


• table - Let the element behave like a < table> element.
.table {
display: table;
border: 1px solid red
}


• initial - It is used to set the default value.
.initial {
display: initial;
border: 1px solid red
}


• inherit - It is used to inherit the property from its parent's elements.
.inherit {
display: inherit;
border: 1px solid red
}


• table-cell - It is used to set the behavior as for all elements
.table-cell {
display: table-cell;
border: 1px solid red
}


• table-column - It is used to set the behavior as for all elements.
.table-column {
display: table-column;
border: 1px solid red
}

Sample Programme Source code:

Introduction to CSS Part-2 PDF Click here to download