Project 2: Blog Layout

CSS Stylist

Builds on these lessons

Box Model Box Sizing Width Height Margin Padding Borders Display Overflow

Step 1 of 3

Project

The Box Model & box-sizing

Every element is a box: content, padding, border, then margin, in that order outward. By default padding and border ADD to the width you set — box-sizing: border-box makes them count inside it instead, which is what almost every real stylesheet wants. Set that globally, then give .post-card padding, a border, and a bottom margin.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

* {
  box-sizing: border-box;
}

.post-card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  margin-bottom: 24px;
}

← Previous Next →