➢The display property is the most important CSS property for controlling layout.
➢The display property specifies if/how an element is displayed.
➢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.

➢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).
Examples:
➢<div>
➢<h1> - <h6>
➢<p>
➢<form>
➢<header>
➢<footer>
➢<section>

➢An inline element does not start on a new line and only takes up as much width as necessary.
Examples:
➢<span>
➢<a>
➢<img>

➢display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.
➢The <script> element uses display: none; as default.

➢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.

➢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.