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.
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.
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.
You can also use value inline-block to display item as block, but other elements can reside on both sides of an element.
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.
A list-item value creates a block for the list box and an inline box for items.
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.
Shuseel Baral is a web programmer and the founder of InfoTechSite has over 8 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.