Day 3: The Display Property & Margin Collapse

Daily Objective

Master the display property to transform element flow behavior and understand margin collapsing.

1. Values of display

• block: Takes full width; respects width, height, and vertical margins/paddings.
• inline: Flows with text; ignores width, height, and vertical margins.
• inline-block: Flows horizontally like inline text, but respects width, height, and padding!
• none: Removes the element completely from document flow.

.nav-link {
  display: inline-block;
  padding: 0.5rem 1rem;
}

2. Margin Collapse

When two vertical margins touch, they collapse into a single margin equal to the largest of the two (they do not add together!).

Daily Hands-on Practice (70%)

1. Build a horizontal navigation bar using display: inline-block on anchor elements.
2. Place two paragraphs with margin-bottom: 30px and margin-top: 20px and inspect the resulting 30px collapsed space in DevTools.