Displaying Elements in CSS

The display property specifies the display behavior of an element. The most common values are:

• none: This value makes the element and its content disappear from the page completely.
• block: This value makes the element take up the full width of its parent element. Block-level elements start on a new line.
• inline: This value makes the element only take up as much width as necessary, and does not force new lines.
• inline-block: This is a hybrid of inline and block. It makes the element only take up as much width as necessary, but allows for setting of width and height like a block element.

Quick mental model

• block: starts on a new line + can set width and height
• inline: stays in the text flow + width and height typically don’t apply the way you expect
• inline-block: stays inline but behaves like a block regarding width and height
• none: removed from the layout completely (acts like it doesn’t exist)

Example syntax:

div {
  display: none | block | inline | inline-block;
}

Example usage:

div {
  display: none; /* The <div> will not appear on the page */
}

p {
  display: block; /* The <p> will take up the full width of its parent */
}

The visibility property allows you to hide an element, but it will still take up the same space as before. The element is hidden, but still affects layout. The main values are visible (default) and hidden.

Example syntax:

p {
  visibility: hidden | visible;
}

Example usage:

p {
  /* The <p> element will be invisible, but still take up space */
  visibility: hidden; 
}

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

Example:

p {
  opacity: 0.5; /* The paragraph will be semi-transparent */
}

• display: none;
  ✅ Element is gone and takes no space. It’s removed from layout.
• visibility: hidden;
  ✅ Element is invisible but still takes up space in the layout.
• opacity: 0;
  ✅ Element is fully transparent but still takes up space and is still “there”.

Bonus note:
With opacity: 0, the element can still receive clicks/focus unless you also disable it (for example with pointer-events: none;). This tip prevents a real-world “why is an invisible div blocking my button?” bug.

The overflow property specifies what should happen if content overflows an element's box. Values include visible (default), hidden, scroll, and auto.

Example syntax:

div {
  overflow: visible | auto | scroll | hidden;
}

Example usage:

div { 
   /* Provides a scrollbar if the <div> content is too big to fit  */
   overflow: auto;
}

• overflow: scroll; always shows scrollbars (even if not needed)
• overflow: auto; shows scrollbars only when needed

Important: overflow needs a fixed box

You’ll usually see overflow used together with a fixed height (or max-height), otherwise the element can simply grow and nothing will “overflow”.

Example:

.box {
  height: 150px;
  overflow: auto;
}

Understanding these properties will allow you to better control how elements are displayed on the web page, and handle different scenarios of content overflow and element visibility. Always remember to test your design on different screen sizes to ensure it looks good on all devices.

• Using display: none and wondering why animations can’t run (because the element is removed)
• Using opacity: 0 and forgetting it can still block clicks
• Expecting overflow to do something without a set height/width