One of the fundamental building blocks of CSS, the display property. Responsible for how or if an element is shown. Every element in HTML has a default display value, typically block or inline.

Block-level Elements
These elements will always start on a new line and take up the full available width, by default. These include:

  • <div>
  • <h1> and the rest
  • <p>
  • <header>
  • <footer>
  • <section>

Inline Elements
These elements will start wherever the previous element ends which may or may not be a new line, and will only take up the space required. These include:

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

display: none
None is a special case and will remove or display elements without the need to delete or re-create them. This is typically used with animation or some kind of dynamic element outside of a framework which can handle conditional UI for you. In this case, the element will no longer affect the rest of the DOM, it is essentially gone. If you’d rather just hide an element but have its effect in space remain — see visibility: hidden. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store