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:
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.
| table |
It makes element behave like a <table> element |
| inline-table |
It makes element is displayed as an inline-level table |
| table-caption |
It makes element behave like a <caption> element |
| table-column-group |
It makes element behave like a <colgroup> element |
| table-header-group |
It makes element behave like a <thead> element |
| table-footer-group |
It makes element behave like a <tfoot> element |
| table-row-group |
It makes element behave like a <tbody> element |
| table-cell |
It makes element behave like a <td> element |
| table-column |
It makes element behave like a <col> element |
| table-row |
It 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:
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:
Comments are closed.