CSS : Elements that collapse to 0px

 

1. Elements that collapse to 0px

In CSS, almost any Block-level or Inline-block element will collapse to 0px height if it contains no children, no text, and no fixed dimensions.

Common examples include:

• Containers: <div>, <section>, <article>, <main>, <header>, <footer>.
• Layout Elements: <span> (if set to display: block or inline-block), <aside>, <nav>.
• Lists: <ul> and <ol> (if they have no <li> children).
• Flex/Grid Items: If a container is display: flex, its children will still collapse unless they have content or a specific flex-basis.

Note: Elements like <img>, <input>, or <button> are "Replaced Elements." They usually have default browser dimensions even when "empty."

---

2. Attributes that require a Parent Reference

The "100% of auto is 0" rule applies to several CSS properties. If the parent’s size is determined by its own content (dynamic), these attributes will fail to calculate:

• height: As you discovered, 100% height requires the parent to have a fixed height (px, vh, etc.) or also be a percentage child of a fixed-height container.
• min-height / max-height: Percentage values here follow the exact same rule as height.
• margin (Top/Bottom): If you use percentages for vertical margins, they are actually calculated based on the width of the parent, not the height (a common CSS "gotcha").
• padding (Top/Bottom): Like margins, vertical padding percentages are also based on the parent's width.
• top / bottom: When using position: absolute, these percentages relate to the height of the nearest "positioned" (relative/absolute) ancestor.
• flex-basis: If set to a percentage, it depends on the parent flex container’s main axis size.

The Logic Tip

In CSS, Width is "infinite" (it defaults to 100% of the screen/parent), but Height is "finite" (it defaults to 0 and grows with content). This is why width: 100% almost always works, while height: 100% usually feels "broken."