Display & Visibility

CSS Display & Visibility

The display Property

Value	Behaviour
`block`	Takes full width, starts on new line (div, p, h1…)
`inline`	Flows with text, no width/height (span, a…)
`inline-block`	Flows inline but respects width/height/padding
`none`	Removes element from layout (not visible)
`flex`	Enables Flexbox on the container
`grid`	Enables CSS Grid on the container

visibility vs display: none

visibility: hidden — hides but keeps the space
display: none — removes from layout entirely

Example

/* Force block */
span.label { display: block; }

/* Inline-block: sizing + inline flow */
.badge {
  display: inline-block;
  padding: 4px 10px;
  background: #6366f1;
  color: white;
  border-radius: 999px;
}

/* Hide completely */
.hidden  { display: none; }

/* Hide but keep space */
.ghost   { visibility: hidden; }

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned