مقایسه فارسی content box و border box در درس مدل جعبه CSS

درس 26 از دوره 60 جلسه ای آموزش HTML و CSS ارومیا دیزاین

برای یک کارت width: 200px نوشته اید، اما مرورگر عرض بیشتری نشان می دهد. یا برای جدا کردن دو بخش، padding را تغییر می دهید ولی فاصله بیرونی آن ها درست نمی شود. در این جلسه مدل جعبه در CSS را با نمونه های عددی و یک پروژه عملی بررسی می کنیم تا بتوانید عرض واقعی عنصر و محل درست فاصله ها را تشخیص دهید.

پیش نیاز: واحدهای اندازه گیری در درس 25 و رنگ و پس زمینه در درس 24. حدود 35 دقیقه برای مطالعه و 20 دقیقه برای اجرای پروژه در نظر بگیرید. این جلسه پایه ای برای چینش صفحه است؛ قبل از Flexbox و Grid باید بدانیم هر عنصر چه فضایی می گیرد.

دانلود پروژه درس 26؛ مدل جعبه CSS همراه پاسخ تمرین

مدل جعبه در CSS چیست؟

مرورگر برای چیدمان، عناصر را به صورت جعبه هایی در نظر می گیرد. برای نمونه بلوکی این درس، از مرکز به بیرون چهار ناحیه داریم: محتوا، padding، border و margin. این چهار بخش کار یکسانی ندارند؛ شناخت مرز آن ها جلوی تغییرهای حدسی را می گیرد.

  • Content یا محتوا: فضای متن، تصویر یا فرزندان عنصر.
  • Padding یا فاصله داخلی: فضای بین محتوا و کادر عنصر.
  • Border یا کادر: مرزی با ضخامت، نوع خط و رنگ مشخص.
  • Margin یا فاصله بیرونی: فضای خارج از کادر برای فاصله گرفتن از اطراف.
نمودار فارسی مدل جعبه CSS؛ محتوا، فاصله داخلی، کادر و فاصله بیرونی
از مرکز به بیرون: محتوا، padding، border و margin. نمودار برای شناخت ترتیب لایه هاست و مقیاس عددی ندارد.

زمینه عنصر به طور معمول در ناحیه محتوا و padding دیده می شود و زیر border نیز امتداد دارد. margin خودش رنگ زمینه عنصر را نمی گیرد؛ رنگی که در فاصله بیرونی می بینید معمولاً مربوط به زمینه پشت آن است. برای مرور رنگ ها، رنگ و پس زمینه در درس 24 را ببینید.

تفاوت margin و padding؛ فاصله کجا لازم است؟

اگر نوشته به لبه کارت چسبیده، padding کارت را تنظیم کنید. اگر خود کارت به بخش بعدی نزدیک است، margin آن را بررسی کنید. جابه جا کردن این دو می تواند ظاهر اولیه را شبیه کند، اما فضای رنگی، عرض و رابطه عناصر متفاوت خواهد بود.

.card {
  padding: 24px;
  border: 2px solid #075985;
  margin-bottom: 32px;
}

در نمونه بالا، متن از داخل کادر 24px فاصله دارد. فضای زیر کادر با margin-bottom تعیین می شود. padding مقدار منفی نمی پذیرد؛ margin می تواند منفی باشد، ولی برای اصلاح فاصله معمولی از مقدار منفی شروع نکنید. ابتدا منبع فاصله و مدل محاسبه را پیدا کنید.

نوشتن کوتاه چهار جهت

margin و padding با یک تا چهار مقدار نوشته می شوند. ترتیب چهار مقدار فیزیکی، بالا، راست، پایین و چپ است. جهت rtl این ترتیب را معکوس نمی کند.

.card {
  padding: 8px 16px 24px 32px;
  margin: 12px 24px;
}
تفسیر مقدارهای کوتاه padding؛ همین ترتیب برای margin هم کاربرد دارد
نوشتار معنی
padding: 16px; هر چهار طرف 16px
padding: 12px 24px; بالا و پایین 12px؛ راست و چپ 24px
padding: 8px 16px 24px; بالا 8px؛ راست و چپ 16px؛ پایین 24px
padding: 8px 16px 24px 32px; بالا 8px، راست 16px، پایین 24px، چپ 32px

اگر بعد از padding-top یک اعلان کوتاه padding بنویسید، آن اعلان تمام جهت ها را دوباره تعیین می کند. ترتیب و انتخاب قانون را مطابق آبشار و اولویت قوانین در درس 23 بررسی کنید. در صفحات چندزبانه، ویژگی های منطقی مانند padding-inline هم مفیدند؛ در این جلسه برای شناخت جهت ها از نوشتار فیزیکی استفاده می کنیم.

border؛ ضخامت، نوع خط و رنگ

.card {
  border: 2px solid #075985;
  border-radius: 12px;
}

سه بخش اعلان کوتاه بالا، ضخامت 2px، نوع خط solid و رنگ آبی است. صرف تعیین border-color معمولاً کادر قابل مشاهده نمی سازد؛ نوع خط و ضخامت را نیز بررسی کنید. border-radius گوشه را گرد می کند و فضای تازه ای مانند padding اضافه نمی کند.

content-box؛ چرا عرض واقعی بزرگ تر می شود؟

در content-box، مقدار width اندازه ناحیه محتواست. برای جعبه ساده بدون تبدیل و محدودیت اضافی، padding و border افقی به آن اضافه می شوند تا عرض مرز بیرونی کادر به دست بیاید. margin بیرون این محاسبه است.

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 4px solid #075985;
}

محتوا 200px، فاصله داخلی دو طرف مجموعاً 40px و کادر دو طرف مجموعاً 8px است؛ پس عرض مرز بیرونی کادر 248px می شود. اگر margin-left و margin-right هرکدام 10px باشند، سهم افقی همراه فاصله های بیرونی 268px خواهد بود. در پروژه margin افقی نمونه ها صفر است تا مقایسه واضح بماند.

border-box؛ width شامل کدام بخش هاست؟

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 4px solid #075985;
}

با همین width، padding و border، عرض مرز بیرونی کادر 200px می شود و عرض محتوا به 152px کاهش پیدا می کند. margin همچنان خارج از width است. border-box محتوا را جادویی کوچک یا داخل جعبه محبوس نمی کند؛ متن بلند، فرزند عریض و محدودیت های اندازه هنوز می توانند بیرون بزنند.

مقایسه با width برابر 200px، padding برابر 20px و border برابر 4px در هر طرف
مدل عرض محتوا عرض با padding و border
content-box 200px 248px
border-box 152px 200px

این محاسبه مربوط به مثال همین درس است. اگر مجموع padding و border از عرض تعیین شده بیشتر شود، ناحیه محتوا به عرض منفی تبدیل نمی شود؛ بنابراین border-box تضمین مطلق برای هر مقدار نامتناسبی نیست.

یک تنظیم پایه برای پروژه ها

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

این تنظیم اندازه گیری کارت ها را قابل پیش بینی تر می کند. انتخابگرهای before و after را فعلاً به عنوان پوشش عناصر مجازی نگه دارید؛ کاربرد ساخت آن ها را در جلسه مربوط به شبه عناصر یاد می گیریم. قاعده همگانی در درس 22؛ انتخابگرهای CSS معرفی شد. در پروژه، فقط نمونه content-example را به صورت صریح به content-box برمی گردانیم تا تفاوت قابل مشاهده باشد.

چرا بعضی marginهای عمودی جمع نمی شوند؟

در جریان بلوکی عادی و با شرایط لازم، marginهای عمودی مجاور می توانند ادغام شوند. مثلاً اگر margin-bottom بخش اول 24px و margin-top بخش دوم 16px باشد، فاصله نهایی معمولاً 24px است، نه 40px. این توضیح برای دو مقدار مثبت و نمونه بلوکی ساده است؛ قواعد مقدار منفی و رابطه والد و فرزند جزئیات بیشتری دارند.

.first {
  margin: 0 0 24px;
}
.second {
  margin: 16px 0 0;
}

margin افقی ادغام نمی شود. margin آیتم های Flexbox و Grid نیز مانند این نمونه بلوکی ادغام نمی شود. border-box مسئله ادغام margin را حل نمی کند، چون روش محاسبه اندازه با رابطه فاصله های بیرونی دو موضوع متفاوت است. برای نظم اولیه، به جای تعیین فاصله از هر دو طرف، می توانید فاصله میان بخش ها را از یک جهت کنترل کنید.

گاهی margin بالای اولین فرزند با والد رابطه ادغام پیدا می کند. اگر فضای داخل یک بخش لازم دارید، padding والد انتخاب روشن تری است. برای شناخت رابطه والد و فرزند، ساختار معنایی درس 15 را مرور کنید.

وسط چین کردن یک ظرف بلوکی

.page {
  width: 92%;
  max-width: 56rem;
  margin: 2rem auto;
}

در جریان بلوکی عادی، وقتی عرض ظرف از فضای در دسترس کمتر باشد، auto در دو جهت افقی فضای باقی مانده را تقسیم می کند. این کار خود ظرف را وسط قرار می دهد و به معنی وسط چین شدن متن داخل آن نیست. برای واحدهای درصد و rem به واحدهای اندازه گیری در درس 25 برگردید.

پروژه درس 26؛ آزمایشگاه مدل جعبه

دانلود فایل های پروژه درس 26 همراه پاسخ تمرین

ZIP شامل index.html، style.css، solution.css و README.txt فارسی است. فایل را استخراج کنید و index.html را در مرورگر باز کنید. پروژه بدون اینترنت و بدون JavaScript اجرا می شود. برای ساخت دستی دو فایل، اتصال فایل CSS در درس 21 را مرور کنید.

دو نمونه با width یکسان ولی مدل متفاوت داریم. زیر آن ها کارت خدمات و کارت تمرین قرار گرفته است. در صفحه خیلی باریک، ناحیه نمونه ها اسکرول افقی داخلی دارد تا عرض آزمایشی ثابت بماند. این رفتار برای آزمایش اندازه است؛ در کارت خدمات از عرض سازگار با ظرف استفاده می کنیم.

فایل index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>آزمایشگاه مدل جعبه CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page">
    <header>
      <p>درس 26 ارومیا دیزاین</p>
      <h1>آزمایشگاه مدل جعبه</h1>
      <p>دو جعبه با مقدار width یکسان، اما عرض بیرونی متفاوت.</p>
    </header>
    <section class="panel" aria-labelledby="compare-title">
      <h2 id="compare-title">1. مقایسه روش محاسبه عرض</h2>
      <div class="demo-area">
        <article class="box content-example">
          <h3>مدل content-box</h3>
          <p>عرض محتوا 200px است. padding و border به آن اضافه می شوند.</p>
        </article>
        <article class="box border-example">
          <h3>مدل border-box</h3>
          <p>عرض جعبه با کادر 200px است. فضای محتوا کوچک تر می شود.</p>
        </article>
      </div>
    </section>
    <section class="panel" aria-labelledby="service-title">
      <h2 id="service-title">2. کارت خدمات با فاصله های مستقل</h2>
      <article class="service-card">
        <h3>طراحی سایت آموزشی</h3>
        <p>فاصله متن از کادر با padding تنظیم شده است.</p>
        <a class="button" href="#practice">رفتن به تمرین</a>
      </article>
      <p>فضای بیرون کارت با margin تنظیم می شود.</p>
    </section>
    <section id="practice" class="panel">
      <h2>تمرین شما</h2>
      <article class="practice-card">
        <h3>کارت تمرین</h3>
        <p>کادر و فاصله داخلی این کارت را مطابق صورت تمرین اصلاح کنید.</p>
      </article>
    </section>
  </main>
</body>
</html>

فایل style.css

html {
  font-size: 100%;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Tahoma, sans-serif;
  line-height: 1.8;
  color: #1e293b;
  background-color: #f1f5f9;
}
.page {
  width: 92%;
  max-width: 56rem;
  margin: 2rem auto;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
.panel {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background-color: #ffffff;
}
.demo-area {
  max-width: 100%;
  overflow-x: auto;
  border: 1px dashed #64748b;
}
.box {
  width: 200px;
  padding: 20px;
  border: 4px solid #075985;
  margin: 16px 0;
  background-color: #e0f2fe;
}
.box h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.box p {
  margin: 0;
}
.content-example {
  box-sizing: content-box;
}
.border-example {
  box-sizing: border-box;
}
.service-card {
  width: 100%;
  padding: 1.5rem;
  border: 2px solid #075985;
  margin: 0 0 1rem;
  border-radius: 0.75rem;
  background-color: #f0f9ff;
}
.service-card h3 {
  margin-top: 0;
}
.button {
  display: inline-block;
  padding: 0.5em 1em;
  border: 2px solid #075985;
  border-radius: 0.5rem;
  background-color: #075985;
  color: #ffffff;
}
.button:focus-visible {
  outline: 3px solid #9f1239;
  outline-offset: 3px;
}
.practice-card {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
}

سه آزمایش پیشنهادی

  1. روی هر جعبه Inspect بزنید. در بخش Computed یا Box Model، content، padding و border را بخوانید؛ عدد نوشته شده کنار نمودار محتوا را با عرض بیرونی جعبه اشتباه نگیرید.
  2. padding مشترک جعبه ها را از 20px به 30px تغییر دهید. عرض بیرونی نمونه اول 268px می شود. نمونه دوم 200px باقی می ماند و فضای محتوایش به 132px می رسد.
  3. margin-bottom کارت خدمات را بیشتر کنید، سپس تغییر را برگردانید و padding آن را بیشتر کنید. مقایسه کنید کدام تغییر فضای رنگی داخل کارت را بیشتر می کند.

بعد از هر آزمایش فایل را ذخیره و صفحه را بازخوانی کنید. تغییر در ابزار مرورگر به طور خودکار فایل اصلی را ذخیره نمی کند. اگر قانون شما اثر نداشت، انتخابگر، مسیر CSS و قانون برنده را بررسی کنید. می توانید همین روش را روی پروژه نهایی HTML درس 20 اجرا کنید.

تمرین؛ کارت خدمات بدون بیرون زدن

فقط کارت practice-card را تغییر دهید: padding برابر 1.5rem، کادر سبز 3px و margin-bottom برابر 1rem باشد. عرض با کادر و فاصله داخلی باید در ظرف جا بگیرد. margin-top عنوان داخل آن را صفر کنید، بدون اینکه عنوان های دیگر صفحه عوض شوند.

نمایش پاسخ تمرین 
.practice-card {
  box-sizing: border-box;
  width: 100%;
  padding: 1.5rem;
  border: 3px solid #166534;
  margin-bottom: 1rem;
}
.practice-card h3 {
  margin-top: 0;
}

این قوانین را در پایان style.css اضافه کنید یا مسیر stylesheet را به solution.css تغییر دهید. فایل پاسخ شامل تمام قواعد پایه و همین اصلاح است. width: 100% در این نمونه همراه border-box استفاده شده تا padding و border به عرض تعیین شده اضافه نشوند.

اشتباه های رایج مدل جعبه

  • استفاده از margin برای فاصله نوشته از کادر؛ این فاصله معمولاً به padding نیاز دارد.
  • حساب نکردن padding و border در مدل content-box.
  • تصور اینکه margin هم داخل width در border-box قرار دارد.
  • جمع کردن همیشگی marginهای عمودی بدون توجه به ادغام.
  • قرار دادن ارتفاع ثابت کوتاه روی کارت متن دار؛ با متن بیشتر یا زوم، محتوا ممکن است جا نشود.
  • حذف outline لینک برای زیبایی؛ تمرکز صفحه کلید باید قابل دیدن بماند.

برای بررسی خوانایی و کار با صفحه کلید، درس 16؛ دسترس پذیری را مرور کنید. ابتدا فاصله های واقعی را در ابزار مرورگر ببینید و بعد مقدار مناسب را تغییر دهید؛ افزودن important علت اشتباه اندازه را برطرف نمی کند.

پرسش های رایج

padding زمینه عنصر را بزرگ می کند؟

ناحیه padding معمولاً زمینه عنصر را نشان می دهد. در content-box افزایش آن عرض بیرونی را بیشتر می کند؛ در border-box با عرض مشخص، فضای محتوا کمتر می شود. نتیجه را همراه box-sizing بررسی کنید.

چرا width: 100% از والد بیرون زده؟

در content-box، padding و border می توانند به عرض محتوا اضافه شوند. margin افقی، فرزند عریض یا محتوای بدون شکست نیز ممکن است علت باشند. border-box نقطه شروع خوبی است، اما همه علت ها را پوشش نمی دهد.

border و outline چه تفاوتی دارند؟

border بخشی از محاسبه جعبه است. outline معمولاً فضای چینش را تغییر نمی دهد و برای نمایش تمرکز مناسب است. outline را جای کادر ساختاری فرض نکنید و برای صفحه کلید آن را پنهان نکنید.

برای فاصله داخل بخش از margin اولین فرزند استفاده کنم؟

اگر هدف فضای داخلی والد است، padding والد معمولاً واضح تر است. margin فرزند ممکن است تحت قواعد ادغام رفتار غیرمنتظره داشته باشد.

مرور و درس بعدی

اکنون می توانید فاصله داخلی و بیرونی را جدا کنید، عرض محتوا و عرض کادر را محاسبه کنید و اثر content-box و border-box را توضیح دهید. در درس 27 به ویژگی display و تفاوت block، inline و inline-block می پردازیم. جلسه های دوره در دسته آموزش HTML و CSS قرار دارند.

مطالعه تکمیلی: راهنمای مدل جعبه MDN و مرجع box-sizing در MDN.

5/5 - (1 امتیاز)

Dms-admin

آموزش css , htmlآموزش طراحی سایت

فیسبوکXپینترستلینکدینواتس اپتلگرامایمیل

مطالب مرتبط

بدون دیدگاه

دیدگاهتان را بنویسید