CSS Display

Every HTML element is represented by a box that contains content and determines the amount of spacing around the content. The CSS display property specifies how this box appears on the web page relative to other elements, as well as the behavior of its child elements (i.e. the elements inside it).

In CSS there are two “levels” this box can adopt: block and inline. Block-level elements exist on their own line and span the entire width of the page unless another width is specified. <div> and <p> are examples of block-level elements.

Inline-level elements do not break the flow of content — multiple inline elements can exist on the same line. <span><b>, and <a> are inline-level elements.

The display property targets these levels and lets us change them for our styling needs. A display rule is written like so:

display: value;

…where value specifies the way the element appears — in other words, its level.

Property values:

ValueDescription
inlineIt is used to displays an element as an inline element.
blockIt is used to displays an element as a block element
contentsIt is used to disappear the container.
flexIt is used to display an element as a block-level flex container.
gridIt is used to display an element as a block-level grid container.
inline-blockIt is used to display an element as an inline-level block container.
inline-flexIt is used to display an element as an inline-level flex container.
inline-gridIt is used to display an element as an inline-level grid container.
inline-tableIt is used to display an inline-level table
list-itemIt is used to display all the elements in <li> element.
run-inIt is used to display an element inline or block level, depending on the context.
tableIt is used to set the behavior as <table> for all elements.
table-captionIt is used to set the behavior as <caption> for all elements.
table-column-groupIt is used to set the behavior as <column> for all elements.
table-header-groupIt is used to set the behavior as <header> for all elements.
table-footer-groupIt is used to set the behavior as <footer> for all elements.
table-row-groupIt is used to set the behavior as <row> for all elements.
table-cellIt is used to set the behavior as <td> for all elements.
table-columnIt is used to set the behavior as <col> for all elements.
table-rowIt is used to set the behavior as <tr> for all elements.
noneIt is used to remove the element.
initialIt is used to set the default value.
inheritIt is used to inherit the property from it’s parents’ elements.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>

<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>

</body>
</html>

Output:

Leave a Reply