CSS Display Properties

The display property in CSS is fundamental for controlling the layout of elements on a web page. It helps in defining how elements are rendered on the screen.

Understanding the different values of the display property can greatly enhance your ability to control the layout and visibility of elements.

Property Description
block The element is rendered as a block-level element. It starts on a new line and takes up the full width available.
inline The element is rendered as an inline-level element. It does not start on a new line and only takes up as much width as necessary.
inline-block The element is rendered as an inline-level element, but it behaves like a block element. It does not start on a new line, but you can set width and height values.
contents The element itself is not rendered, but its child elements are rendered as if they were children of the parent element.
flex The element is rendered as a block-level flex container. It enables a flexible layout system for its children.
grid The element is rendered as a block-level grid container. It enables a grid layout system for its children.
inline-flex The element is rendered as an inline-level flex container. It behaves like an inline element, but its children are laid out using the flexbox model.
inline-grid The element is rendered as an inline-level grid container. It behaves like an inline element, but its children are laid out using the grid model.
inline-table The element is rendered as an inline-level table. It behaves like an inline element, but it has the characteristics of a table.
list-item The element is rendered as a list item. It typically has a bullet or a number.
run-in The element is rendered as either block or inline, depending on the context.
table The element is rendered as a block-level table. It behaves like a table element.
table-caption The element is rendered as a table caption. It is used within a table to describe its content.
table-column-group The element is rendered as a group of columns within a table. It allows you to apply styles to multiple columns at once.
table-header-group The element is rendered as a group of header rows within a table. It is typically used for styling table headers.
table-footer-group The element is rendered as a group of footer rows within a table. It is typically used for styling table footers.
table-row-group The element is rendered as a group of rows within a table. It is typically used for styling table body rows.
table-cell The element is rendered as a table cell. It is used within a table to represent a single cell.
table-column The element is rendered as a column within a table. It allows you to apply styles to individual columns.
table-row The element is rendered as a row within a table. It is used within a table to represent a single row.
none The element is not rendered at all and takes up no space in the layout.
initial The element inherits the initial value of the display property as defined by the CSS specifications.
inherit The element inherits the display property from its parent element.

Block

display: block; causes an element to behave like a block element. It starts on a new line and stretches out to the left and right as far as it can.

Try yourself 
        
            .block-element {
    display: block;
    width: 100%;
    background-color: lightblue;
}

Inline

display: inline; makes the element lay out inline, meaning it will not start on a new line and only occupy just enough width it requires.

Try yourself 
        
            .inline-element {
    display: inline;
    background-color: lightgreen;
}

Inline-Block

display: inline-block; elements are like display: inline; elements but they can have a width and height, which allows them to be adjusted without breaking the flow of the document.

Try yourself 
        
            .inline-block-element {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: lightcoral;
}

Contents

display: contents; makes the container disappear, making the child elements children of the element the next level up in the DOM.

Try yourself 
        
            .contents-element {
     display: contents;
}

Flex

display: flex; turns the element into a flexible container, allowing more complex, alignable layouts that can adjust their child elements' sizes to fit available space.

Try yourself 
        
            .flex-container {
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
}
 .flex-item {
     background-color: deepskyblue;
     width: 100px;
     height: 100px;
}

Grid

display: grid; enables a grid-based layout system that provides an easy way to design complex responsive layouts.

Try yourself 
        
             .grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	background-color: lightyellow;
}

.grid-item {
	background-color: lightseagreen;
	width: 100px;
	height: 100px;
}

Inline-Flex

display: inline-flex; displays an element as an inline-level flex container.

Try yourself 
        
             .inline-flex-container {
	display: inline-flex;
	justify-content: space-between;
	background-color: lightpink;
}

.flex-item {
	background-color: lightcoral;
	width: 100px;
	height: 100px;
}

Inline-Grid

display: inline-grid; displays an element as an inline-level grid container.

Try yourself 
        
             .inline-grid-container {
	display: inline-grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	background-color: lightgoldenrodyellow;
}

.grid-item {
	background-color: lightgreen;
	width: 100px;
	height: 100px;
}

Inline-Table

display: inline-table; displays an element as an inline-level table.

Try yourself 
        
             .inline-table {
	display: inline-table;
	background-color: lightblue;
}

List-Item

display: list-item; makes the element behave like a li element.

Try yourself 
        
             .list-item {
	display: list-item;
	list-style-type: disc;
	margin-left: 20px;
}

Run-In

display: run-in; displays an element as either block or inline, depending on context.

Try yourself 
        
             .run-in {
	display: run-in;
}

Table

display: table; makes the element behave like a table element.

Try yourself 
        
             .table {
	display: table;
	width: 100%;
	background-color: lightgray;
}

Table-Caption

display: table-caption; makes the element behave like a caption element.

Try yourself 
        
             .table-caption {
	display: table-caption;
	caption-side: top;
	background-color: lightyellow;
}

Table-Column-Group

display: table-column-group; makes the element behave like a colgroup element.

Try yourself 
        
             .table-column-group {
	display: table-column-group;
	background-color: lightblue;
}

Table-Header-Group

display: table-header-group; makes the element behave like a thead element.

Try yourself 
        
             .table-header-group {
	display: table-header-group;
	background-color: lightcoral;
}

Table-Footer-Group

display: table-footer-group; makes the element behave like a tfoot element.

Try yourself 
        
             .table-footer-group {
	display: table-footer-group;
	background-color: lightgreen;
}

Table-Row-Group

display: table-row-group; makes the element behave like a tbody element.

Try yourself 
        
             .table-row-group {
	display: table-row-group;
	background-color: lightpink;
}

Table-Cell

display: table-cell; makes the element behave like a td element.

Try yourself 
        
             .table-cell {
	display: table-cell;
	padding: 10px;
	background-color: lightyellow;
}

Table-Column

display: table-column; makes the element behave like a col element.

Try yourself 
        
             .table-column {
	display: table-column;
	background-color: lightgray;
}

Table-Row

display: table-row; makes the element behave like a tr element.

Try yourself 
        
             .table-row {
	display: table-row;
	background-color: lightblue;
}

None

display: none; completely removes the element from the document's layout, meaning the document is rendered as if the element does not exist at all.

Try yourself 
        
             .none-element {
	display: none;
}

Initial

display: initial; sets this property to its default value.

Try yourself 
        
             .initial-element {
	display: initial;
}

Inherit

display: inherit; inherits this property from its parent element.

Try yourself 
        
             .inherit-element {
	display: inherit;
}