The box model बॉक्स मॉडल

1. Padding, border and rounded corners

The browser draws every element as a box with layers, from inside out:

• content — the text or picture
• padding — space inside the box, around the content
• border — a line around the padding: border: 2px solid #f59e0b; (width, style, colour)
• margin — space outside, pushing other boxes away

border-radius: 12px; rounds the corners. Together these turn plain text into a neat card.

                .card {
  padding: 16px;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  background-color: #fffbeb;
}
              

Challenge: Kaju katli product card

Turn .card into a card: give it padding, a visible border, rounded corners with border-radius, and keep its background colour.

2. Margin, centring and box-sizing

Margin is the space outside a box. A few common tricks:

• margin-bottom: 16px; puts a gap below each card
• max-width: 600px; margin: 0 auto; keeps a block from getting too wide and centres it (auto margins on left and right)
• * { box-sizing: border-box; } makes width include padding and border — sizes become much easier to predict

The * selector means "every element".

                * {
  box-sizing: border-box;
}
.container {
  max-width: 600px;
  margin: 0 auto;
}
              

Challenge: Space out the sweets list

The cards are stuck together and the page is too wide. Fix it:

• * { box-sizing: border-box; }
• each .card gets a margin-bottom
• .container gets a max-width and is centred with margin: 0 auto