Width, Height & Display

1.box {
2  width: 300px;
3  height: 100px;
4}

1.responsive-box {
2  width: 50%;      /* Ideally takes half width */
3  min-width: 200px; /* Never smaller than this */
4  max-width: 400px; /* Never larger than this */
5}

1.box {
2  height: 80px;
3  overflow: auto; /* Adds scrollbar if needed */
4}

1.block-element {
2  display: block;
3  /* Takes full width available, starts new line */
4}

1.inline-element {
2  display: inline;
3  width: 200px;  /* IGNORED */
4  height: 100px; /* IGNORED */
5  /* Flows with text, padding only affects visuals */
6}

1.inline-block-element {
2  display: inline-block;
3  width: 150px;  /* RESPECTED */
4  height: 60px;  /* RESPECTED */
5  /* Sits side-by-side but allows sizing */
6}

1/* Removes element completely (layout shifts) */
2.hidden { display: none; }
3 
4/* Hides element but keeps its space (invisible ghost) */
5.invisible { visibility: hidden; }