CSS Display property

CSS Display Property

The display property in CSS is used to specify how an element is displayed on a web page. It controls the layout and visibility of an element.

The display property is useful for setting the internal and external display type of an element.

Possible Values

The value passed to the display property is a keyword. These keyword values ​​can be divided into six different groups, as shown below:


Outside Values ​​(<display-outside>)

Values ​​in this category specify the outside display type of an element.

  • inline : Makes the element behave like an inline element, allowing other elements to appear on the same line. Examples: <span>, <img>, , etc.

  • block : Makes the element behave like a block-level element, occupying the entire width of its parent container and creating new lines before and after it. Examples: <div>, <form>, <p>, etc.

Internal Values ​​(<display-inside>)

Values ​​in this category specify the element’s internal display type.

  • flow : The element displays its content using a flow layout (block-level and inline).

  • flow-root : The element displays as a block-level box, referring to its formatting root.

  • table : Defined as a block-level box, behaves similarly to the HTML <table> element.

  • flex : Defined as a block-level box, following the flexbox model.

  • grid : Defined as a block-level box, following the grid model.

  • ruby : Defined as an inline-level element, following the ruby ​​formatting model.

List Item Value (<display-listitem>)

Makes the element behave like a list item marker, typically used with the <li> element.

  • A single value represents a list item.

  • Can be used with list-style-type and list-style-position.

  • List items can be paired with any external display value, as well as the internal display values ​​flow or flow-root.

Internal Value (<display-internal>)

Complex layouts, such as table and ruby, use this property to display their content.

  • table-row-group: Acts like the
    HTML element.

  • table-header-group : Behaves like the

    HTML element.

  • table-footer-group : Behaves like the

    HTML element.

  • table-row : Behaves like the

    HTML element.

  • table-cell : Behaves like the

    HTML element.

  • table-column-group : Behaves like the

    HTML element.

  • table-column : Acts like the

    HTML element.

  • table-caption : Acts like the

    HTML element.

  • ruby-base : Acts like the HTML element.

  • ruby-text : Acts like the HTML element.

  • ruby-base-container : Generates as an anonymous box.

  • ruby-text-container : Behaves like the < rtc> HTML element.

Box Value (<display-box>)

Defines whether the element generates a display box.

  • contents : The element’s display is replaced by its contents, i.e., its children and pseudo-elements.

  • none : Turns off display of the element and its descendants.

Precomposed Value (<display-legacy>)

Precomposed single-keyword value. Requires separate keywords to apply to block-level and inline-level elements.

  • inline-block : Causes the element to be displayed as an inline-level block container. Same as inline flow-root .

  • inline-table : Specifies that the element should behave like a table, but still be displayed inline within a block-level context. Same as inline table .

  • inline-flex : Allows the element to have a flexible box layout while participating in an inline-level context. Same as inline flex .

  • inline-grid : Specifies that a grid container should be treated as an inline-level element. Same as inline grid .

Applies to

All HTML elements.

DOM Syntax

object.style.display = 'display:inline-flex';

CSS Display – Inline

Here is an example of display:inline: 

<html> 
<head> 
<style> 
li { 
display: inline; 
font-size: 2rem; 
border: 1px solid red;
margin: 5px;
}

</style>

</head>

<body>

<h2>Display - Inline</h2>

<li>Item1</li>

<li>Item2</li>

<li>Item3</li>

<li>Item4</li>

</body>

</html>

CSS Property – Display – Block

Here is an example of display:block:

<html> 
<head> 
<style> 
li { 
display: block; 
font-size: 2rem; 
border: 1px solid red; 
margin: 5px; 
background-color:#239327; 
width: 200px; 
} 
</style> 
</head> 
<body> 
<h2>Display - Block</h2> 
<li>Item1</li> 
<li>Item2</li> 
<li>Item3</li> 
<li>Item4</li> 
</body> 
</html>

CSS display – inline-block

Here is an example using display:inline-block:

<html> 
<head> 
<style> 
div { 
display: inline-block; 
font-size: 2rem; 
border: 1px solid red; 
margin: 5px; 
background-color: #239327; 
height: 100px; 
width: 200px; 
} 
</style> 
</head> 
<body> 
<h2>display: inline-block</h2> 
<div>Inline-Block 1</div> 
<div>Inline-Block 2</div> 
<div>Inline-Block 3</div> 
</body> 
</html>

CSS Display – None

Here is an example of display:none: 

<html> 
<head> 
<style> 
div { 
font-size: 2rem; 
border: 1px solid red; 
margin: 5px; 
background-color: #239327; 
height: 100px; 
width: 200px; 
} 
div.ib { 
display: inline-block; 
} 
div.none { 
display:none; 
} 
</style> 
</head> 
<body> 
<h2>display: none (Block 2)</h2> 
<div class="ib">Block 1</div> 
<div class="none">Block 2</div> 
<div class="ib">Block 3</div> 
</body> 
</html>

CSS show-table

This is an example for display: table, display: table-cell, display: table-row, display: table-caption:

<html> 
<head> 
<style> 
div { 
display: flex; 
border: 1px solid black; 
} 
.table { 
display: table; 
} 
.row { 
display: table-row; 
padding: 3px; 
} 
.cell { 
display: table-cell; 
padding: 3px; 
} 
.caption { 
display: table-caption; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div class="table"> 
<div class="caption">Sample Table</div> 
<div class="row"> 
<div class="cell">Row1-Cell1</div> 
<div class="cell">Row1-Cell2</div> 
<div class="cell">Row1-Cell3</div> 
</div> 
<div class="row"> 
<div class="cell">Row2-Cell1</div> 
<div class="cell">Row2-Cell2</div> 
<div class="cell">Row2-Cell3</div> 
</div> 
<div class="row"> 
<div class="cell">Row3-Cell1</div> 
<div class="cell">Row3-Cell2</div> 
<div class="cell">Row3-Cell3</div> 
</div> 
</div> 
</body> 
</html>

CSS Display – Flex Layout

Here is an example of display:flex:

<html>
<head>
<style>
div {
display:flex;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: #239327;
height: 50px;
width: 200px;
}
</style>
</head>
<body>
<h2>display:flex</h2>
<div>Flex-Block 1</div>
<div>Flex-Block 2</div>
<div>Flex-Block 3</div>
</body>
</html>

CSS Display – inline-flex

This is an example showing display:inline-flex :

<html> 
<head> 
<style> 
div { 
display: inline-flex; 
font-size: 2rem; 
border: 1px solid red; 
margin: 10px; 
background-color: #239327; 
height: 50px; 
width: 280px; 
} 
</style> 
</head> 
<body> 
<h2>display: inline-flex</h2> 
<div>Inline Flex-Block 1</div> 
<div>Inline Flex-Block 2</div> 
<div>Inline Flex-Block 3</div> 
</body> 
</html>

CSS display – grid

This is an example of display:grid:

<html> 
<head> 
<style> 
div { 
display: grid 
font-size: 2rem; 
border: 1px solid red; 
margin: 10px; 
background-color: #239327; 
height: 50px; 
width: 280px; 
marg 
} 
</style> 
</head> 
<body> 
<h2>display: grid</h2> 
<div>grid-Block 1</div> 
<div>grid-Block 2</div> 
<div>grid-Block 3</div> 
</body> 
</html>

CSS Display – inline-grid

The following is an example showing the use of display:inline-grid: 

<html> 
<head> 
<style> 
div { 
display: inline-grid 
font-size: 2rem; 
border: 1px solid red; 
margin: 10px; 
background-color: #239327; 
height: 50px; 
width: 280px; 
} 
</style> 
</head> 
<body> 
<h2>display: inline-grid</h2> 
<div>inline grid-Block 1</div> 
<div>inline grid-Block 2</div>
<div>inline grid-Block 3</div>
</body>
</html>

CSS Display – list-item

Here is an example of display: list-item:

<html>
<head>
<style>
li {
display: list-item;
font-size: 2rem;
border: 1px solid red;
margin: 10px;
background-color: #239327;
height: 50px;
width: 280px;
}
</style>
</head>
<body>
<h2>display: list-item</h2>
<div>
<ul>
<li>list item 1</li> 
<li>list item 2</li> 
<li>list item 3</li> 
</ul> 
</div> 
</body> 
</html>

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *