CSS Display Property

 

The Display property in CSS defines how the components (div, hyperlink,

 heading, etc) are going to be placed on the web page. As the name suggests,

 this property is used to define the display of the different parts of a web

 page. 

 

Ex 1- Using Display: None, Display: Inline, Display: Block, and Display:

 Inline-Block

 

CSS Code

 

 

 

Output

 

 

Ex 2. Let us see Using Inline-block to create navigation links. By Default,

 List Items are displayed vertically. In this example we Use display: inline-

block to display them horizontally. if You resize the browser window, the

 links will automatically break when it becomes too crowded.

 

CSS Code

 

 

Output

 

 

Ex 3- A demonstration of how to use the contents property Value. In the

 Following Example the (.a) Container will disappear and making the child

 element (.b) children of the element the next level up in the DOM.

 Remember display: contents does not work in Edge/Internet Explorer.

 

CSS Code

 Output

Ex 4- A demonstration of how to use the inherit property value.

CSS Code

Output

Ex 5- Set the direction of some flexible items inside a<div> element in

 reserve order.

CSS Code

Output