CSS- Display | CSS for Beginners - Class 6 PDF Download

CSS Layout - The display Property

• This panel contains a <div> element, which is hidden by default (display: none).
• It is styled with CSS, and we use JavaScript to show it (change it to (display: block).

Block-level Elements

Examples of block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline Elements

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

Display: none;

Override The Default Display Value

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.
A common example is making inline <li> elements for horizontal menus:
Example

li {

  display: inline;

}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.
The following example displays <span> elements as block elements:
Example

span {

  display: block;

}

The following example displays <a> elements as block elements:
Example

a {

  display: block;

}