CSS Display Property

When you create a large web application, sometimes you need to control the display of some elements.
There can be several reasons for this. For example, you want to show the same elements that belong to the content or to that particular page.

If you display elements that are not related then this will create a bad user experience. Whatever the reason, but all the web developers need to control the display of elements for a good user experience.
CSS lets you display display properties to control the display of HTML elements. Depending on the different values ​​of this property, you can control the display of elements in many ways.

This property’s default value is “inline“.

Changing the Default Display Value

Some values ​​of display property are being given below.

Display Inline

This is the default property of display property. Elements from this value are displayed in the same line as an inline element.

Example

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Block

When the value property of the display property is define, the elements are shown differently as block elements.

Example

span {
    display: block;
}
a {
    display: block;
}

Display Inline-Block

Elements from this value show in the same line as inline elements but they are the block container.

Example

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display List-Item

From this value, the element is shown as the item of a list. For example, if you want to show span elements as a list in the web page, then display property’s list item value can be used.

Example

span {
    display:list-item;
}

Display Table

This value shows the element like a table.

Example

span {
    display:table;
}

Display None

This value does not have an element display. This does not make any difference to the rest of the webpage. For example, if you want to hide all the divs in the web page, then such a display property can be of none value.

Example

h1 {
    display: none;
}
p {
    display: none;
}