باکس‌مدل CSS
حاشیه، padding، margin و width را جدا بلدید. حالا همه را روی یک نقشه ببینید. باکس‌مدل CSS می‌گوید هر عنصر لایه‌های تودرتو دارد: محتوا در وسط، بعد padding، بعد حاشیه (border)، بعد margin بیرون.
چهار لایه
جعبه را از داخل به بیرون بخوانید.
📊 لایه‌های باکس‌مدل
| لایه | کجا می‌نشیند | کار روزمره |
|---|---|---|
| محتوا | مرکز | متن، تصویر و فرزندان اینجایند؛ width / height معمولاً همین را اندازه می‌دهند |
| Padding | بین محتوا و حاشیه | کوسن داخلی؛ پس‌زمینه معمولاً آن را پر می‌کند |
| حاشیه (border) | دور padding | لبهٔ کشیده‌شدهٔ جعبه |
| Margin | بیرون حاشیه | فاصلهٔ بیرونی که این جعبه را از همسایه‌ها جدا می‌کند |
اول فقط اندازهٔ محتوا
فقط عرض محتوا، بدون padding و حاشیه — داستان ساده می‌ماند.
فقط عرض محتوا
css.box-content {
width: 200px;
background-color: #ccfbf1;
}padding اضافه کنید — ناحیهٔ رنگ‌شده بزرگ می‌شود
Padding داخل حاشیه می‌نشیند. در مدل پیش‌فرض content-box، padding بیرون عرض محتوا اضافه می‌شود؛ پس جعبهٔ رنگ‌شده پهن‌تر می‌شود.
محتوا به‌همراه padding
css.box-pad {
width: 200px;
padding: 20px;
background-color: #99f6e4;
}
/* محتوا ۲۰۰px می‌ماند؛ padding هر طرف ۲۰px اضافه می‌کند */حاشیه اضافه کنید — حلقهٔ بعدی
حاشیه دور padding می‌پیچد. با اندازه‌گذاری پیش‌فرض، ضخامت حاشیه هم به اندازهٔ بیرونی جعبهٔ حاشیه اضافه می‌شود.
محتوا، padding و حاشیه
css.box-border {
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #5eead4;
}هر چهار لایه با هم
Margin پس‌زمینه را رنگ نمی‌کند؛ فقط همسایه‌ها را عقب می‌راند.
دستور پخت کامل باکس‌مدل
css.card {
width: 200px; /* محتوا */
padding: 16px; /* کوسن داخلی */
border: 2px solid #134e4a; /* لبه */
margin: 24px; /* فاصلهٔ بیرونی */
background-color: #ecfdf5;
}عرض یکسان، اندازهٔ کل متفاوت
دو جعبه می‌توانند هر دو width: 200px داشته باشند ولی وقتی padding و حاشیه وارد دستور پخت شوند، خیلی فرق کنند.
ساده در برابر پدینگ‌دار
css.bare {
width: 200px;
background-color: #fef3c7;
}
.padded {
width: 200px;
padding: 24px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* هر دو می‌گویند width ۲۰۰px؛ ولی .padded جای افقی بیشتری می‌گیرد */قانون پیش‌فرض را یادتان بماند
به‌طور پیش‌فرض (box-sizing: content-box)، width و height جعبهٔ محتوا را توصیف می‌کنند. Padding و حاشیه معمولاً جعبهٔ نهاییِ دیدنی را بزرگ‌تر می‌کنند. درس بعدی تخصصی، box-sizing: border-box را می‌گوید که این حساب را عوض می‌کند.
خودتان امتحان کنید
.box-contentفقط باwidth: 200pxو پس‌زمینه.- کپی کنید،
padding: 20pxبگذارید و بزرگ شدن ناحیهٔ رنگ‌شده را ببینید. - حاشیهٔ ضخیم اضافه کنید و دوباره اندازهٔ کل را ببینید.
margin: 24pxبگذارید و ببینید همسایه‌ها عقب می‌روند بدون اینکه پس‌زمینه آن فاصله را پر کند..bareو.paddedرا کنار هم بگذارید — عرض اعلان‌شده یکی، جای اشغال‌شده فرق دارد.
اشتباهات رایج
- فکر کردن که margin بخشی از پر پس‌زمینه است (بیرون است و معمولاً شفاف)
width: 200pxگذاشتن و انتظار اینکه بعد از padding سنگین جعبهٔ حاشیه دقیقاً ۲۰۰px بماند (با content-box نه)- قاطی کردن ترتیب لایه‌ها (محتوا → padding → حاشیه → margin)
- قاطی کردن outline با border (ابزار دیگری است)
- پریدن به عادت border-box قبل از فهم مدل پیش‌فرض
خلاصه
- هر عنصر لایه‌های محتوا، padding، حاشیه و margin دارد
- Padding داخل حاشیه است؛ margin بیرون
- width/height پیش‌فرض جعبهٔ محتوا را اندازه می‌دهند
- Padding و حاشیه اغلب اندازهٔ دیدنی کل را زیاد می‌کنند
- Margin جداسازی بیرونی می‌سازد بدون رنگ کردن پر
box-sizing(درس تخصصی بعدی) می‌تواند حساب عرض را عوض کند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود