CSS Display

This is the most important property of CSS which is used to control the layout of the element. It specifies how the element is displayed.

Every element has a default display value according to its nature. Every element on the webpage is a rectangular box and the CSS property defines the behavior of that rectangular box.


Changing the default display value

Overriding the default display value of an element is an important implication of the display property.

For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-block level element.

By default, div is a block level element while span is a inline element. But we can change these default behaviour using the below ways.


Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element.

The inline element takes the required width only. It doesn’t force the line break so the flow of text doesn’t break in inline example. The inline elements are:

  • <span>
  • <a>
  • <em>
  • <b>

The style rules in the following example displays the <p> element as inline-level element.

Input:-

Index.html
	
<body> 
   <p>Paragraph 1</p> 
   <p>Paragraph 2</p> 
   <p>Paragraph 3</p>
</body>

Style.css
	
p{
  display: inline;
	 width: 100px;
}

Output:-


Display Inline-block

The inline-block value of the display property causes an element to generate a block box that will be flowed in the same line as adjacent content.

It is very similar to inline element but the difference is that we are able to set the width and height.

Input:-

Index.html
	
<body> 
   <p>Paragraph 1</p> 
   <p>Paragraph 2</p> 
   <p>Paragraph 3</p>
</body>

Style.css
	
p{
  display: inline-block;
	 width: 100px;
}

Output:-


Display none

The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none.

The document is rendered as though the element did not exist in the document tree. The value none for the display property does not create an invisible box — it creates no box at all.

Input:-

Index.html
	
<body> 
	  <h1>Heading 1</h1>
   <p>Paragraph 1</p> 
   <p>Paragraph 2</p> 
   <p>Paragraph 3</p>
</body>

Style.css

h1{
  display: none;
}

Output:-


Other CSS display property

Following are some other CSS display properties which help in displaying content in different ways:-

Property-value           Description
flexused to display an element as an block-level flex container. It is new in css3.
inline-flexused to display an element as an inline-level flex container. It is new in css3.
inline-tabledisplays an element as an inline-level table.
list-Itemmakes the element behave like a <li> element.
tablemakes the element behave like a <table> element.
table-captionmakes the element behave like a <caption> element.
table-column-groupmakes the element behave like a <colgroup> element.
table-header-groupmakes the element behave like a <thead> element.
table-footer-groupmakes the element behave like a <tfoot> element.
table-row-groupmakes the element behave like a <tbody> element.
table-cellmakes the element behave like a <td> element.
table-rowmakes the element behave like a <tr> element.
table-columnmakes the element behave like a <col> element.