CSS Display

The display property is the most important CSS property for controlling layout. It specifies how an element is displayed on the screen and how it interacts with other elements.

---

Main Display Values

1. display: block

Block-level elements always start on a new line and take up the full width available. Common examples include <div>, <h1>, and <p>.

div { display: block; }

---

2. display: inline

Inline elements only take up as much width as necessary and do not force a new line. Important restriction: You cannot set the width or height of an inline element.

span { display: inline; }

---

3. display: inline-block

Elements behave like inline (they sit next to each other), but you are allowed to set the width and height.

div { display: inline-block; width: 100px; }

---

4. display: none

The element is completely removed from the page. It takes up no space whatsoever. This is commonly used in navigation menus to hide subsections until they are needed.

.hidden-element {
    display: none;
}

---

Display vs. Visibility

It's important to understand the difference between display: none and visibility: hidden.

• display: none — Removes the element from the layout. Other elements fill the empty space.
• visibility: hidden — Hides the element, but it still takes up the same amount of space (the space appears empty).

---

---