Box Model و اندازه

مهم‌ترین مفهوم چیدمان: هر عنصر یک جعبه است.

margin → border → padding → content

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 16px;
}

راز box-sizing

به‌طور پیش‌فرض width فقط اندازهٔ content است و padding/border به آن اضافه می‌شوند (گیج‌کننده!). این قانون طلایی را همیشه بگذار:

* { box-sizing: border-box; }

حالا width: 300px واقعاً ۳۰۰px می‌ماند.

کنترل اندازه

width: 300px;
max-width: 100%;     /* بیشتر از والد نشود */
min-height: 100vh;   /* حداقل ارتفاع صفحه */

max-width: 100% روی تصاویر، جلوی بیرون‌زدن از کادر را می‌گیرد.