Misc Box Properties

Misc Box Properties

A grab-bag for fine-tuning boxes: overflow, outline, and visibility.

opacity

Transparency of the ENTIRE element (0 to 1).

img {
  opacity: 0.5;
}

0 invisible, 1 fully solid.

visibility

Does the element occupy space?

• visibility: hidden, hidden but STILL takes up space.
• display: none, box removed entirely.
• visibility: visible, shown.

overflow

What happens when content is too big for the box:

div {
  width: 200px;
  height: 100px;
  overflow: hidden;    /* clipped */
  overflow: scroll;    /* scrollbars always */
  overflow: auto;      /* scrollbars only if needed */
}

text-overflow

For single lines exceeding the box:

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* shows ... */
}

For layout (float, grid, flexbox), we have dedicated lessons later. These quick knobs come in handy every day!

TL;DR

• opacity fades the whole element.
• translucent hidden keeps space; display:none removes.
• overflow adds scroll bars or crops.
• text-overflow: ellipsis shows the ...

For set:rounded corners, grid areas, floats are in later lessons.