How to Change Display Style Using CSS

You can change the default display style of any HTML element using display property in CSS. This property specifies an elements display style and can override an element's defined presentation. The different values used in this property are inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none and inherit. In this post I am describing the uses of those different types of display style using CSS. Here are the syntax and examples for changing display style of an element using CSS.

Syntax:

display: inline, | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Example:

div.ads{display:block;}

How to Make Display Style Inline or Block


Using value of display property of an element inline or block, you can make an element display inline or block. The value inline causes an element to act it were an inline element with no returns added.
Example: #intxt{display:inline;}
Another value of display property block makes an elements display block box. For this value all the elements are shown with line break, no elements can reside on both sides of an element.
Example: #inblock{display:block;}
You can also use value inline-block to display item as block, but other elements can reside on both sides of an element.
Example: #in-block{display:inline-block;}
There is another value run-in which will make the item inline or block depending on the context. If a block box that is not floated or positioned follows the run-in box it becomes the first inline box if the block, otherwise, it becomes a block.
Example: #runin{display:run-in;}
A list-item value creates a block for the list box and an inline box for items.
Example: #list{display:list-item;}

Demo:

See the Pen xGvEya by Shuseel Baral (@shuseel) on CodePen.

How to Display An Element As Table Item


Display property in CSS have numerous table-related values, such as defining an element to act as a table. Here are the list of table related display properties and their uses.

tableIt makes element behave like a <table> element
inline-tableIt makes element is displayed as an inline-level table
table-captionIt makes element behave like a <caption> element
table-column-groupIt makes element behave like a <colgroup> element
table-header-groupIt makes element behave like a <thead> element
table-footer-groupIt makes element behave like a <tfoot> element
table-row-groupIt makes element behave like a <tbody> element
table-cell It makes element behave like a <td> element
table-columnIt makes element behave like a <col> element
table-rowIt makes element behave like a <tr> element

Example:

#tbl{display:table;border:2px solid red;}
#inline_tbl{display:inline-table;border:1px solid red;}
#tbody{display:table-row-group;border:1px solid red;}
#thead{display:table-header-group;border:1px solid red;background:pink;}
#tfoot{display:table-footer-group;border:1px solid red;background:green;}
#tr{display:table-row;border:1px dashed blue;}
#colgroup{display:table-column-group;border:1px solid red;}
#col{display:table-column;border:1px solid red;}
#cell{display:table-cell;border:1px solid blue;}
#caption{display:table-caption;text-align:center;}

Demo:

See the Pen XbvKyN by Shuseel Baral (@shuseel) on CodePen.

How to Hide An Element Using CSS


The most important value for the display property is none, which completely removes an element from the document tree and unlike hidden value of the visibility property, which does not preserve an element's canvas space.

Example: #no-display{display:none;}
#hide{visibility:hidden;}

Demo:

See the Pen eNqVZK by Shuseel Baral (@shuseel) on CodePen.