در حال بارگذاری...

Box Sizing در CSS

دیگر می‌دانید padding و حاشیه می‌توانند جعبه را از width اعلان‌شده بزرگ‌تر کنند. box-sizing قانون این حساب را انتخاب می‌کند: width یعنی «فقط محتوا»، یا «محتوا به‌همراه padding و حاشیه»؟

دو مدل یک‌نگاهه

📊 content-box در برابر border-box

مدل width / height چه چیزی را پوشش می‌دهد اثر روزمره
content-box (پیش‌فرض) فقط محتوا Padding و حاشیه بیرون اندازهٔ اعلان‌شده اضافه می‌شوند
border-box محتوا + padding + حاشیه اندازهٔ اعلان‌شده لبهٔ بیرونی حاشیه است؛ محتوا کوچک می‌شود تا جا شود
Margin در هیچ‌کدام نیست فاصلهٔ بیرونی جدا از box-sizing می‌ماند

پیش‌فرض: content-box

با مدل پیش‌فرض، width: 200px محتوا را اندازه می‌دهد. Padding و حاشیه که بیایند، جعبهٔ رنگ‌شده بزرگ می‌شود.

Content-box (پیش‌فرض)

css
CSS Code 
.panel-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #ccfbf1;
}
/* محتوا ۲۰۰px + padding + حاشیه → کل پهن‌تر */

بروید سراغ border-box

با border-box، همان width: 200px شامل padding و حاشیه می‌شود. لبهٔ بیرونی نزدیک ۲۰۰px می‌ماند؛ ناحیهٔ محتوا کوچک‌تر می‌شود.

اندازه‌گذاری border-box

css
CSS Code 
.panel-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 4px solid #0f766e;
background-color: #99f6e4;
}
/* جعبهٔ حاشیهٔ بیرونی حدود ۲۰۰px؛ محتوا جمع می‌شود */

عدد یکسان، جای اشغال‌شده فرق دارد

هر دو مدل را با width و padding و حاشیهٔ یکسان کنار هم بگذارید.

مقایسهٔ دو مدل

css
CSS Code 
.contenty {
box-sizing: content-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fef3c7;
}

.borderish {
box-sizing: border-box;
width: 180px;
padding: 16px;
border: 6px solid #b45309;
background-color: #fde68a;
}
/* اعلان‌ها یکی؛ .contenty جای افقی بیشتری می‌گیرد */

چرا تیم‌ها border-box را دوست دارند

وقتی کارت باید دقیقاً ستون را پر کند — مثلاً width: 100% با padding — border-box کمک می‌کند کارت از والد بیرون نزند.

کارت دوستدار ستون

css
CSS Code 
.card {
box-sizing: border-box;
width: 100%;
padding: 1.25rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
}

یک عادت آرام سراسری

خیلی از استایل‌شیت‌ها یک‌بار برای همه‌چیز border-box می‌گذارند تا حساب عرض روزمره قابل‌پیش‌بینی بماند. Margin هنوز بیرون است.

عادت سراسری border-box

css
CSS Code 
*,
*::before,
*::after {
box-sizing: border-box;
}

خودتان امتحان کنید

  1. .panel-content با width: 200px و padding و حاشیه زیر content-box.
  2. کپی کنید به .panel-border با box-sizing: border-box — ببینید اندازهٔ بیرونی به ۲۰۰px نزدیک می‌شود.
  3. .contenty و .borderish را با عدد یکسان کنار هم بگذارید.
  4. کارت width: 100% با padding بسازید؛ box-sizing را عوض کنید و ببینید کدام بیرون می‌زند.
  5. عادت سراسری * را در یک صفحهٔ کوچک امتحان کنید.

اشتباهات رایج

  • فکر کردن که border-box شامل margin هم می‌شود (نمی‌شود)
  • فراموش کردن که پیش‌فرض content-box است تا عوضش کنید
  • انتظار اینکه outline با box-sizing عوض شود (outline بیرون می‌ماند و هنوز جای چیدمان نمی‌گیرد)
  • width: 100% با padding سنگین زیر content-box و تعجب از بیرون زدن جعبه
  • قاطی کردن درصدها بدون دانستن کدام مدل اندازه‌گذاری فعال است

خلاصه

  • پیش‌فرض box-sizing: content-box محتوا را اندازه می‌دهد؛ padding و حاشیه اضافه می‌شوند
  • border-box padding و حاشیه را داخل width/height اعلان‌شده نگه می‌دارد
  • Margin بیرون هر دو مدل است
  • Border-box اغلب عرض ستون و کارت‌های width: 100% را ساده‌تر می‌کند
  • ریست سراسری border-box عادتی رایج و آرام است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش