CSS DISPLAY

The CSS display property is used to control layout and element structure and behavior for the layout.

All HTML elements have some default display property values.

Block elements

Block elements occupy the entire width of the container and always start on the next line even if the content in them is smaller.

• <div>
• <p>
• <form>
• <header>
• <nav>
• <aside>
• <blockquote>
• <ul>
• <h1> - <h6>
• <footer>
• <section>

Here's an example:

p {
  display: block;
  border: 2px solid orange;
}

Output:

Inline Elements

Inline elements do not occupy the entire width of the screen. It only takes up as much space as it needs so elements can be arranged next to it. Width of inline elements cannot be changed.

• <a>
• <b>
• <span>
• <i>
• <iframe>
• <input>
• <img>

Here's an example:

span {
  display: inline;
  border: 2px solid orange;
}

Output:

Display Inline Block

No element is inline block by default. Once set, inline block elements width and height can be changed as the user likes. The major difference between display:block and display:inline-block is that the inline-block does not add a line-break to the element, so the elements can be placed on a single line like display:inline.

Here's an example:

span {
  display: inline-block;
  border: 2px solid orange;
  width: 400px;
}

Output:

Display None

This hides the element as if it does not exist. display: none; is mostly used with JavaScript to hide or show elements without having to delete or create them.