CSS Display

 CSS Display Property Explained

The CSS display property controls how elements are shown on a webpage. It defines how elements take up space and how they sit next to each other.

---

🔹 Main Types of Display

1. block

   • Takes up the full width of the page.

   • The next element always goes below it.

   • You can set height and width.

   • Examples: <div>, <p>, <h1>.

---

2. inline

   • Only takes as much width as its content.

   • You cannot set height or width.

   • Examples: <span>, <a>, <b>.

---

3. inline-block

   • A mix of block and inline.

   • Allows you to set height and width.

   • Can sit side by side in the same line if there is enough space.

---

4. none

   • Hides the element completely from the page (but still exists in the code).

   • Useful for things like hiding a list item after clicking a button.

---

🔹 Behavior Summary

• Block elements → Always stack vertically (one per line).

• Inline elements → Sit next to each other but ignore height/width.

• Inline-block elements → Sit next to each other and also respect height/width.

• None → Removes the element from the layout.

👉 By changing only the display property, you can completely change the layout of your webpage.