An exact-width info panel

Goal

Style .panel in styles.css so each panel renders at exactly 280px wide including its padding and border, and so the gap between the two stacked panels is exactly 24px.

Example

A box with width: 280px, padding: 20px and a 4px solid border normally renders wider than 280px, because padding and border are added on top of the content width by default:

.box {
  width: 280px;
  padding: 20px;
  border: 4px solid #333;
  /* renders at 280 + 20 + 20 + 4 + 4 = 328px wide */
}

Adding box-sizing: border-box changes what width measures, so the padding and border get absorbed into the 280px instead of adding to it:

.box {
  width: 280px;
  padding: 20px;
  border: 4px solid #333;
  box-sizing: border-box;
  /* renders at exactly 280px wide */
}

Rules

• Edit only styles.css. index.html is already correct and must not change — it has two sibling <div class="panel"> elements inside #panels, and the second one also has the class panel--second.
• .panel needs: width: 280px, padding: 20px, a 4px solid border (any color), and box-sizing: border-box, so the rendered width is exactly 280px, not 280 plus padding and border.
• Give the 24px gap to only one of the two touching edges — put margin-top: 24px on .panel--second, and do not add any margin to the first panel's bottom. Setting margin on both sides at once is the box-model mistake this lab is about.
• Do not use flexbox, grid, or any layout property beyond the box model — this lesson is about width, padding, border, margin and box-sizing only.

What you'll practice

Reading how box-sizing: border-box changes what width measures, and controlling a gap between two elements with margin on only one side instead of both.

Run it

gonomicon fetch fs-week-1/05-02-info-panel-box-model
cd 05-02-info-panel-box-model
gonomicon test
gonomicon submit

Hints

1. box-sizing: border-box is what makes width include the padding and border instead of adding them on top — set it on .panel along with width: 280px, padding: 20px and a 4px solid border.
2. Don't put margin-top on .panel itself, or both panels get it and the gap becomes the collapsed/combined result of two margins instead of exactly 24px. Give the 24px margin to only the second panel, using the .panel--second class already in the HTML.
3. .panel { width: 280px; padding: 20px; border: 4px solid #333; box-sizing: border-box; } .panel--second { margin-top: 24px; } — nothing else needs to change.