CSS Display & Visibility

/* block — full width, starts on new line */
div, p, h1, section { display: block; }  /* default */

/* inline — sits within text, no width/height control */
span, a, strong, em { display: inline; }  /* default */

/* inline-block — sits inline BUT accepts width/height/padding */
.btn { display: inline-block; padding: 0.5rem 1.5rem; }

/* none — completely removes the element (no space) */
.hidden { display: none; }

/* flex and grid — covered in their own lessons */
.nav  { display: flex; }
.page { display: grid; }

/* display: none — element gone, takes no space */
.menu { display: none; }

/* visibility: hidden — invisible but STILL takes up space */
.menu { visibility: hidden; }

/* opacity: 0 — invisible, takes space, can still be clicked */
.menu { opacity: 0; }

/* Default: hidden */
.dropdown { display: none; }

/* Show when JS adds .open class */
.dropdown.open { display: block; }

document.querySelector(".btn").addEventListener("click", () => {
  document.querySelector(".dropdown").classList.toggle("open");
});

/* Make a link fill its container (full-width clickable area) */
nav a { display: block; padding: 0.75rem 1rem; }

/* Make list items horizontal */
ul li { display: inline-block; margin-right: 1rem; }

/* Better: use flexbox for this */
ul    { display: flex; gap: 1rem; }
ul li { list-style: none; }