The display property is the most important CSS property for controlling layout.
The display Property
The display property is used to specify how an element is shown on a web page.
Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline.
The display property is used to change the default display behavior of HTML elements.
Block-level Elements
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Examples of block-level elements:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline Elements
An inline element DOES NOT start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
- <span>
- <a>
- <img>