Display Property

Controls how an element participates in layout.

• display:block – occupies the full width, starts on a new line.
• display:inline – flows with text, width/height ignored.
• display:inline-block – respects width/height but stays inline.
• display:flex – enables Flexbox layout.
• display:grid – enables Grid layout.
• display:none – removes element from the render tree (useful for accessibility toggles).

---

Example: Inline‑block button list

ul { list-style:none; padding:0; }
li { display:inline-block; margin-right:1rem; }