Day 1: The CSS Box Model & box-sizing

Daily Objective

Master the four layers of the CSS Box Model and configure box-sizing: border-box.

1. The Four Layers of the Box Model

Every HTML element is a box:

• Content: The text, image, or child elements.
• Padding: Clear space inside the border around content.
• Border: The stroke surrounding padding.
• Margin: Clear space outside the border separating neighboring elements.

/* Universal Border-Box Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width: 300px;
  padding: 1.5rem;      /* Inside spacing */
  border: 1px solid #cbd5e1;
  margin: 1rem auto;    /* Center horizontally with auto margins */
}

With border-box, the declared width: 300px includes padding and border!

Daily Hands-on Practice (70%)

1. Inspect an element in Chrome DevTools and look at the Box Model diagram at the bottom of the Styles tab.
2. Experiment with setting box-sizing: content-box vs border-box and note the width difference.