Educational

display Property

Written by

Saim Khalid

in

The display Property

CSS display property specifies the behaviour of HTML elements. It defines how an elements is displayed on the webpage.

Syntax

display: value;

Display Property Values

ValueDescription
inlineIt displays the element as an inline element on which width and height properties do not have any effect. Default.
blockIt displays the element as a block element which starts on a new line and takes up the whole width.
contentsIt make an element disappear from the layout while keeping its child elements visible and in their original positions within the layout.
flexIt displays an element as a block-level flex container.
gridIt displays an element as a block-level grid container.
inline-blockIt allows an element to flow along with other inline elements along with having block-level characteristics such as width and height.
inline-flexIt displays an element as an inline-level flex container.
inline-gridIt displays an element as an inline-level grid container.
inline-tableIt displays the element as an inline-level table.
run-inIt displays an element depending on context as either block or inline.
tableIt enables the element to behave like a <table> element.
table-captionIt enables the element to behave like a <caption> element.
table-column-groupIt enables the element to behave like a <colgroup> element.
table-header-groupIt enables the element to behave like a <thead> element.
table-footer-groupIt enables the element to behave like a <tfoot> element.
table-row-groupIt enables the element to behave like a <tbody> element
table-cellIt enables the element to behave like a <td> element.
table-columnIt enables the element to behave like a <col> element.
table-rowIt enables the element to behave like a <tr> element.
noneIt removes the element completely.
initialThis sets the property to its default value.
inheritThis inherits the property from the parent element.

CSS display Property with inline Value

The following example illustrates the use of inline value on div elements making them appear as inline element.

Example

<!DOCTYPE html><html><head><style>

  .inline-item {
     display: inline;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
  }


  .container {
     border: 3px solid #ccc;
     padding: 15px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: inline 
   </h4><div class="container"><div class="inline-item">

     Item 1
  &lt;/div&gt;&lt;div class="inline-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="inline-item"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with block Value





The following example illustrates the use of block value on span elements making them appear as block element.





Example





<!DOCTYPE html><html><head><style>

  .block-item {
     display: block;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
  }


  .container {
     border: 3px solid #ccc;
     padding: 15px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: block 
   </h4><div class="container"><span class="block-item">

     Item 1
  &lt;/span&gt;&lt;span class="block-item"&gt;
     Item 2
  &lt;/span&gt;&lt;span class="block-item"&gt;
     Item 3
  &lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Contents Value





The following example illustrates the use of the contents value. In this example, the .child element behaves as direct child of .parent element bypassing the .wrapper element.





Example





<!DOCTYPE html><html><head><style>

  .wrapper {
     display: contents;
  }


  .child {
     text-align: center;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
  }


  .parent {
     display: block;
     background-color: #f0f0f0;
     padding: 10px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: contents
   </h4><div class="parent"><div class="wrapper"><div class="child">

        Child 1
     &lt;/div&gt;&lt;div class="child"&gt;
        Child 2
     &lt;/div&gt;&lt;div class="child"&gt;
        Child 3
     &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Flex Value





To set an element to be a flex container making its children (flex items) layout in a flexible and responsive way, we use the flex value. The container uses the Flexbox layout model, which allows for easy alignment, distribution, and ordering of items along a single axis. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .flex-container {
     display: flex;
     background-color: #f0f0f0;
     padding: 10px;
  }


  .flex-item {
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
     flex: 1;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: flex
   </h4><div class="flex-container"><div class="flex-item">

     Item 1
  &lt;/div&gt;&lt;div class="flex-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="flex-item"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Grid Value





To set an element to be a grid container which uses the grid layout model, allowing for the creation of two-dimensional layouts with rows and columns, we use the grid value. Grid items can be placed and sized explicitly or automatically across the grid. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .grid-container {
     display: grid;
     background-color: #f0f0f0;
     padding: 10px;
     gap: 10px;
  }


  .grid-item {
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     text-align: center;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: grid
   </h4><div class="grid-container"><div class="grid-item">

     Item 1
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="grid-item"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Inline Block Value





To make an element behave like an inline-level element (allowing it to flow with text and other inline content) while retaining block-level properties such as width and height, we use the inline-block value. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .inline-block-item {
     text-align: center;
     display: inline-block;
     width: 200px;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
  }


  .container {
     border: 3px solid #ccc;
     padding: 15px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: inline-block 
   </h4><div class="container"><span class="inline-block-item">

     Item 1
  &lt;/span&gt;&lt;span class="inline-block-item"&gt;
     Item 2
  &lt;/span&gt;&lt;span class="inline-block-item"&gt;
     Item 3
  &lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Inline Flex Property





To set an element to be an inline-level flex container making the container behaves like an inline element, flowing with surrounding text or inline elements, while still applying Flexbox layout rules to its children, we use the inline-flex property. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .inline-flex-container {
     display: inline-flex;
     background-color: #f0f0f0;
     padding: 10px;
  }


  .flex-item {
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
     flex: 1;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: inline-flex
   </h4><div class="inline-flex-container"><div class="flex-item">

     Item 1
  &lt;/div&gt;&lt;div class="flex-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="flex-item"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Inline Grid Value





To set an element to be an inline-level grid container such that it behaves like an inline element (flowing with text and other inline content) while using the grid layout model to arrange its children, we use the inline-grid value. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .grid-container {
     display: inline-grid;
     background-color: #f0f0f0;
     padding: 10px;
     gap: 10px;
  }


  .inline-grid-item {
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     text-align: center;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: inline-grid
   </h4><div class="grid-container"><div class="inline-grid-item">

     Item 1
  &lt;/div&gt;&lt;div class="inline-grid-item"&gt;
     Item 2
  &lt;/div&gt;&lt;div class="inline-grid-item"&gt;
     Item 3
  &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with Run In Value





To make an element behave as a block-level element or an inline-level element depending on the context, we use the run-in value. It is intended to allow an element to "run in" with surrounding text or other elements. This is shown in the following example.





Example





<!DOCTYPE html><html><head><style>

  .block-container {
     display: block;
     background-color: #f0f0f0;
     padding: 10px;
  }


  .run-in {
     display: run-in;
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 5px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>

  display: run-in
   </h4><div class="block-container"><div class="run-in">

     Run-In Element
  &lt;/div&gt;&lt;p&gt;
     This paragraph follows the run-in element. Depending on 
     the browser support, the run-in element might appear 
     as a block or inline element here.
  &lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with list-item Value





The following example illustrates the use of list-item value on div elements making them appear as bulleted list.





Example





<!DOCTYPE html><html><head><style>

  .list-item {
     display: list-item;
     background-color: #4CAF50;
     padding: 10px;
     margin: 10px;
     text-align: center;


  }
   </style></head><body><h2>

  CSS display property
   </h2><h3>

  display: list item
   </h3><div class="list-item">

  Item 1
   </div><div class="list-item">

  Item 2
   </div><div class="list-item">

  Item 3
   </div></body></html>





CSS display Property with Table Values





To create table-like layouts with CSS without using HTML table elements, we can use different displays for the table. In the following example, some values table, table-row, table-cell and table-caption have been used.





    

  • table: creates a container that behaves like a <table>,
    • 




  • table-cell: styles elements like <td> cells,
    • 




  • table-row: defines elements as rows like <tr>,
    • 




  • table-caption: functions like a <caption> element, positioning captions for the table.
    • 






Example





<!DOCTYPE html><html><head><style>

  div {
     background-color: #4CAF50;
     color: white;
     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><h2>

  CSS display property
   </h2><h4>

  display: table, table-row, table-cell, table-caption
   </h4><div class="table"><div class="caption">

     Sample Table
  &lt;/div&gt;&lt;div class="row"&gt;&lt;div class="cell"&gt;
        Row1-Cell1
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row1-Cell2
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row1-Cell3
     &lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="cell"&gt;
        Row2-Cell1
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row2-Cell2
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row2-Cell3
     &lt;/div&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="cell"&gt;
        Row3-Cell1
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row3-Cell2
     &lt;/div&gt;&lt;div class="cell"&gt;
        Row3-Cell3
     &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>




CSS display Property with none Value





The following example illustrates the use of none value on div elements to hide the element.





Example





<!DOCTYPE html><html><head><style>

  .hidden {
     display: none;
  }


  .visible {
     background-color: #4CAF50;
     color: white;
     padding: 10px;
     margin: 10px;
  }
   </style></head><body><h2>

  CSS display property
   </h2><h4>display: none</h4><div class="visible">

  This is visible
   </div><div class="hidden">

  This is hidden
   </div><div class="visible">

  This is also visible
   </div></body></html>

Comments

Leave a Reply

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

More posts