Display

Summary

The `display` property (`block`, `inline`, `inline-block`, `flex`, `grid`, `none`) determines how an element generates boxes and participates in layout. Understanding display modes explains why elements occupy space differently, how formatting contexts are created, and why changing `display` can completely alter layout behavior.

• 1Compare how `block` vs `inline` vs `inline-block` elements size and wrap. Write down when you would choose each option and what trade-off drives that choice.
• 2Learn why `display: none` removes an element from layout entirely, unlike `visibility: hidden`. Focus on understanding the underlying reason it works, not only memorizing the definition.
• 3Practice switching a nav from `flex` to `none` at different breakpoints.