Table of Contents
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
Example: #intxt{display:inline;}
Example: #inblock{display:block;}
Example: #in-block{display:inline-block;}
Example: #runin{display:run-in;}
Example: #list{display:list-item;}
Demo:
How to Display An Element As Table Item
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
Example: #no-display{display:none;}
#hide{visibility:hidden;}
Demo:
Read Next: How to Make 2-Columns or 3-Columns Using CSS