CSS Display

CSS display is one of the most important property of CSS because it is used for controlling the layout of the elements. It defines how an element will be displayed.
Here are some values of the display property which are widely used:

• inline
• inline-block
• block
• none

---

The inline Value of display

An inline element takes it required vertical space. It doesn't create a line break. Some inline elements are:

• <img>
• <span>
• <a>
• <b>

Example:

The inline-block Value of display

It is very similar to inline element. By using inline-block you can set both height and width whereas the inline value sets only width.

Example:

The block Value of display

An block element takes the full width. It creates a line break always starts with a new line. Some block elements are:

• <h1> to <h6>
• <p>
• <div>
• <form>

Example:

The none Value of display

This none value can hide an element from the page.

Example: