Prev Page Next Page

CSS display Property

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

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).
➢<h1> - <h6>

Inline Elements

➢An inline element does not start on a new line and only takes up as much width as necessary.

Display: none

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.


li { display: inline;}


Display: block

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


span { display: block;}



a { display: block;}


Prev Page Next Page