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.

 

Inline and Block Elements

HTML elements divide into two major categories: block-like and inline elements.

Block-like elements (<div>, <p>, <h1>, etc.) always stretch out as far to the sides as possible and start on a new line.

 

Inline elements (<span>, <img>, <a>, etc.) only take the space that is necessary. They don't have to start on a new line.

The Use of the display Property

By using the CSS display property, you can specify manually what kind of container the element should use:

The syntax is rather intuitive:




display: value;

In the table below, you can see all the available values. The three most common ones will be discussed separately in the following sections.

Property Values

display : inline

Here are a few characteristics of elements set to display: inline:

• Elements only take the necessary space.
• They also appear next to each other on the same line.
• One disadvantage is that you can't control the height and width properties of inline elements.
• The display: inline disregards the padding and margin settings.
• Can have only inline elements.

See the Pen CSS | Display : inline by PANKAJ (@pankkap) on CodePen.

It is also possible to make block elements appear in one line by setting the display: inline. This example overrides the default settings of <p>  and presents them in  same line:

p {
  display: inline;
}

The same overriding of default settings happens to this <span> element:

span {
  display: block;
}

display : block

Here are the characteristics of block elements:

• Elements take the largest possible width.
• Every block element appears in a new line.
• Elements react to width and height properties.
• Elements can contain both inline and block elements.

See the Pen CSS display: block by PANKAJ (@pankkap) on CodePen.

display: inline-block

The CSS display: inline-block is a combination of both inline and block-level features. The main difference is that inline-block responds to width and height properties. 

See the Pen CSS | Display : inline-block by PANKAJ (@pankkap) on CodePen.

This feature makes the CSS display: inline-block more suitable for creating layouts. One of the more popular ways of using inline-block elements is creating horizontal navigation menus.

Here is another example of the use of display: inline-block:

See the Pen List as Menu by PANKAJ (@pankkap) on CodePen.

Hiding Elements: display or visibility

There is a difference in using visibility: hidden and display: none. In the following example, we hide an element with the display: none.

See the Pen CSS display: none by PANKAJ (@pankkap) on CodePen.

The <div> set to display: none completely disappears from the page. The next <div> fills its place, leaving no empty space.

This is the main difference in display: none vs visibility: hidden. The visibility property keeps the element but makes it invisible:

See the Pen CSS visibility: hidden by PANKAJ (@pankkap) on CodePen.

display : flex

CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. It makes responsive design easier. We can arrange any element to the center of the screen easily with display flex property.

See the Pen Centre Image FLex by PANKAJ (@pankkap) on CodePen.

justify-content is a property to align items center in the container along the main axis (horizontal) and align-items allows us to align items center along the cross axis (vertically). 

display : grid

It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning. We can arrange any element to the center of the screen easily with display grid property.

See the Pen CSS display: grid by PANKAJ (@pankkap) on CodePen.

The place-items property in CSS is shorthand for the align-items and justify-items properties, combining them into a single declaration.