مدل جعبه‌ای (Box Model)

مدل جعبه‌ای چیست؟ تصویر ذهنی

هر جعبه دارای یک ناحیه محتوا (content) است و همچنین به صورت اختیاری، می توند دارای فاصله اطراف (mragin)، فاصله تا محتوا (padding) و حاشیه (border) باشد.

عرض و ارتفاع عناصر

معمولاً وقتی عرض و ارتفاع یک عنصر را با استفاده از ویژگی هایwidth وheight تنظیم می کنید، در واقع فقط عرض و ارتفاع ناحیه محتوای عنصر را تنظیم کرده اید. عرض و ارتفاع واقعی جعبه عنصر به چندین عامل بستگی دارد.

فضای واقعی که جعبه عنصر در اختیار دارد، به صورت زیر محاسبه می شود:

• Padding: فاصله حاشیه تا محتوا
• margin: فاصله اطراف حاشیه

فرمول قدیم content-box (پیش‌فرض):

عرض کل = width +
        padding-left + padding-right +
        border-left + border-right +
        margin-left + margin-right

مثال:

.box {
  box-sizing: content-box;

  width: 200px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

عرض کل: 200 + 20+20 + 5+5 + 10+10 = 290px

فرمول جدید box-sizing:

عرض کل = width  ← padding و border داخل width محاسبه می‌شود!

مثال:

.box {
  box-sizing: border-box;

  width: 200px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

عرض کل: 200 + 10+10 = 220px

تغییر فرمول به ساده:

* {
  box-sizing: border-box;  /* همه عناصر! */
}

این روش معمولاً در پروژه های مدرن برای محاسبه دقیق تر استفاده میشود.

نکات کلیدی در استفاده از Box Model

استفاده از مدل جعبه‌ای (Box Model) یکی از اصول اساسی در CSS است که برای طراحی وب‌سایت‌ها بسیار حیاتی است. در اینجا به برخی از نکات کلیدی در استفاده از مدل جعبه‌ای در CSS اشاره خواهم کرد:

عناصر مشتقات جعبه‌ای: همه عناصر در CSS به عنوان جعبه‌هایی در نظر گرفته می‌شوند، این به این معناست که هر عنصر شامل یک مجموعه از مرزها (بوردرها)، پرشین (padding)، مارجین (margin) و محتوا است. این مرزها به صورت پیش‌فرض وجود دارند و می‌توانند با استفاده از CSS شخصی‌سازی شوند.

مرزها (بوردرها): بوردرها اطراف محتوای یک عنصر را تعیین می‌کنند. این مرزها می‌توانند دارای سبک، عرض، و رنگ مختلفی باشند و با استفاده از خاصیت‌های CSS مانند border-style و border-width تنظیم شوند.

پرشین (Padding) : پرشین فضای بین مرز عنصر و محتوای داخلی آن را تعیین می‌کند. این فضا می‌تواند برای ایجاد فاصله و شکل‌دهی به محتوا استفاده شود و با استفاده از ویژگی‌های CSS مانند padding-top و padding-bottom قابل شخصی‌سازی است.

مارجین (Margin) : مارجین فضای بین عنصر فعلی و عناصر دیگر را تعیین می‌کند. مارجین می‌تواند برای تنظیم فاصله بین عناصر یا تعیین فاصله بین یک عنصر و لبه‌های صفحه استفاده شود.

عرض و ارتفاع (Width and Height) : خصوصیت‌های width و height عرض و ارتفاع عنصر را تعیین می‌کنند. این خصوصیت‌ها می‌توانند به صورت ثابت (به واحد پیکسل یا درصد) یا پویا (با استفاده از واحد‌های نسبتی مانند em یا rem) تنظیم شوند.

مدل جعبه‌ای و خواص Display : خواص نمایش (display) نیز تأثیر مهمی بر مدل جعبه‌ای دارند. برای مثال، خواص مانند block، inline و inline-block شیوه نمایش و رفتار مختلفی را برای عناصر تعیین می‌کنند.

استفاده از خواص Box-Sizing : خصوصیت box-sizing در CSS اجازه می‌دهد تا رفتار محاسبه ابعاد عنصر را کنترل کنیم. با تعیین box-sizing: border-box;، ابعاد عنصر شامل حجم پرشین و مرز خواهد بود، که می‌تواند در مدیریت فضا و اندازه‌گیری عناصر مفید باشد.

در کل، درک کامل از مدل جعبه‌ای در CSS اساسی برای طراحی وب سایت‌های حرفه‌ای است. با استفاده از این اصول، می‌توانید ظاهر وب‌سایت خود را بهبود بخشیده و تجربه کاربری را بهبود ببخشید.

برچسب‌ها: CSS, box-model, box-sizing, padding, margin, border-box

حاشیه خارجی Margin

حاشیه خارجی (Margin) فضایی است که در اطراف یک عنصر (خارج از Border) ایجاد می‌شود تا آن را از سایر عناصر مجاور جدا کند. در واقع، مارجین تعیین‌کننده فاصله بین «جعبه» یک عنصر با عناصر دیگر در مدل جعبه‌ای (Box Model) است.

ویژگی‌های کلیدی Margin

• شفافیت: مارجین‌ها فاقد رنگ پس‌زمینه هستند و کاملاً شفاف (Transparent) می‌باشند.
• مقادیر منفی: برخلاف padding (فاصله داخلی)، مارجین می‌تواند مقادیر منفی بپذیرد که باعث نزدیک‌تر شدن یا هم‌پوشانی (Overlap) عناصر می‌شود.
• مقدار Auto: با تنظیم مارجین روی auto می‌توان عناصر بلوکی را در مرکز ظرف خود (Container) قرار داد.

تنظیم جهت‌های مارجین به صورت مجزا

در CSS می‌توانید برای هر چهار جهت اصلی یک عنصر، به صورت جداگانه فاصله تعیین کنید:

• margin-top: فاصله از بالا
• margin-right: فاصله از راست
• margin-bottom: فاصله از پایین
• margin-left: فاصله از چپ

مثال:

h1 {
  margin-bottom: 20px; /* فقط فاصله از پایین */
}

p {
  margin-left: 10px;
  margin-right: 30px;
}

ویژگی مختصرنویسی (Shorthand Property)

برای جلوگیری از طولانی شدن کد، می‌توانید از ویژگی margin به تنهایی استفاده کنید. این ویژگی بسته به تعداد مقادیری که به آن می‌دهید، رفتارهای متفاوتی دارد:

۱. چهار مقدار (ساعت‌گرد)

ترتیب اعمال: بالا، راست، پایین، چپ

/* top: 25px, right: 50px, bottom: 75px, left: 100px */
p {
  margin: 25px 50px 75px 100px;
}

۲. سه مقدار

ترتیب اعمال: بالا، (چپ و راست)، پایین

/* top: 25px, left & right: 50px, bottom: 75px */
p {
  margin: 25px 50px 75px;
}

۳. دو مقدار

ترتیب اعمال: (بالا و پایین)، (چپ و راست)

/* top & bottom: 0, left & right: 10px */
h1 {
  margin: 0 10px;
}

۴. یک مقدار

ترتیب اعمال: هر چهار طرف یکسان

/* All sides: 20px */
div {
  margin: 20px;
}

نکات کلیدی و تخصصی در استفاده از Margin

استفاده صحیح از مارجین فراتر از ایجاد فاصله ساده است و تأثیر مستقیمی بر تجربه کاربری (UX) و ساختار فنی سایت دارد:

1. درک مارجین منفی (Negative Margin): استفاده از مقادیر منفی به طراح اجازه می‌دهد تا عناصر را به داخل محدوده عناصر دیگر بکشد. این تکنیک در طراحی‌های خلاقانه و لایه‌بندی‌های پیچیده برای ایجاد جلوه‌های بصری خاص بسیار کاربردی است.

2. ادغام مارجین‌ها (Margin Collapsing): یک نکته فنی مهم این است که در برخی موارد، مارجین‌های بالا و پایینِ دو عنصر مجاور در هم ادغام می‌شوند و بزرگترین مقدار بین آن‌ها به عنوان فاصله نهایی در نظر گرفته می‌شود (نه مجموع آن‌ها).

3. بهبود خوانایی و سلسله‌مراتب بصری: تنظیم هوشمندانه مارجین‌ها باعث ایجاد "فضای سفید" (White Space) مناسب می‌شود. این فضا از شلوغی صفحه جلوگیری کرده، تمرکز کاربر بر محتوا را افزایش داده و خوانایی متون را بهبود می‌بخشد.

4. نقش در طراحی واکنش‌گرا (Responsive Design): با استفاده از واحدهای نسبی (مانند % یا em/rem) در مارجین، می‌توان فاصله‌هایی ایجاد کرد که با تغییر اندازه صفحه نمایش (در موبایل و تبلت) به طور خودکار تغییر کنند. این امر به پایداری چیدمان در دستگاه‌های مختلف کمک می‌کند.

5. سازماندهی و نظم ساختاری: مارجین‌ها ابزار اصلی برای گروه‌بندی منطقی عناصر هستند. با ایجاد فاصله‌های بیشتر بین بخش‌های غیرمرتبط و فاصله‌های کمتر بین اجزای یک بخش، ساختار محتوایی سایت برای کاربر قابل‌فهم‌تر می‌شود.

6. تفاوت با Padding: همواره به یاد داشته باشید که مارجین فضای خارج از مرز (Border) است، در حالی که پدینگ فضای داخل مرز است. انتخاب درست بین این دو، در هنگام استایل‌دهی به پس‌زمینه‌ها و کادرها حیاتی است.

فاصله داخلی Padding

ناحیه Padding (فاصله داخلی)، فضایی است که بین محتوای یک عنصر و حاشیه (Border) آن قرار می‌گیرد. این ویژگی برای ایجاد تنفس در محتوا و جلوگیری از چسبیدن متن یا تصاویر به لبه‌های عنصر استفاده می‌شود.

ویژگی‌های Padding

ویژگی‌های Padding در CSS به شما این امکان را می‌دهند که فضای خالیِ درون یک عنصر را مدیریت کنید. لازم به ذکر است که ناحیه Padding تحت تأثیر رنگ پس‌زمینه (Background Color) عنصر قرار می‌گیرد؛ یعنی اگر برای عنصری رنگ پس‌زمینه تعیین کنید، این رنگ در ناحیه Padding نیز مشاهده خواهد شد.

تعریف Padding برای جهت‌های مختلف

شما می‌توانید برای هر یک از چهار جهت اصلی عنصر، مقدار Padding متفاوتی را به‌صورت مجزا تعریف کنید:

• padding-top: فاصله داخلی از بالا
• padding-right: فاصله داخلی از راست
• padding-bottom: فاصله داخلی از پایین
• padding-left: فاصله داخلی از چپ

مثال:

h1 {
  padding-bottom: 10px;
}

p {
  padding-top: 20px;
  padding-left: 50px;
}

ویژگی مختصرنویسی (Shorthand Property)

برای جلوگیری از طولانی شدن کد و تعریف جداگانه هر جهت، از ویژگی padding به عنوان یک Shorthand استفاده می‌شود. این ویژگی می‌تواند یک تا چهار مقدار بپذیرد که ترتیب اعمال آن‌ها به شرح زیر است:

1. تک مقداری: مقدار تعیین شده برای هر چهار طرف (بالا، راست، پایین، چپ) اعمال می‌شود.
   • padding: 10px;
2. دو مقداری: مقدار اول برای بالا و پایین و مقدار دوم برای چپ و راست اعمال می‌شود.
   • padding: 10px 20px;
3. سه مقداری: مقدار اول برای بالا، مقدار دوم برای چپ و راست و مقدار سوم برای پایین اعمال می‌شود.
   • padding: 10px 15px 20px;
4. چهار مقداری: مقادیر به ترتیب جهت عقربه‌های ساعت برای بالا، راست، پایین و چپ اعمال می‌شوند.
   • padding: 10px 15px 20px 25px;

مثال:

h1 {
  /* بالا و پایین 10px، چپ و راست 20px */
  padding: 10px 20px;
}

p {
  /* بالا 10، راست 15، پایین 20، چپ 25 */
  padding: 10px 15px 20px 25px;
}

نکات مهم و فنی

• مقادیر منفی: برخلاف ویژگی margin (فاصله خارجی)، ویژگی padding به‌هیچ‌عنوان مقدار منفی نمی‌پذیرد.
• واحد درصد: اگر مقدار Padding را برحسب درصد (%) تعیین کنید، این درصد نسبت به عرض (Width) عنصر دربرگیرنده (Containing Block) محاسبه می‌شود (حتی برای Paddingهای بالا و پایین).
• Box Model: توجه داشته باشید که در حالت پیش‌فرض (content-box)، مقدار Padding به عرض و ارتفاع کلی عنصر اضافه می‌شود، مگر اینکه از ویژگی box-sizing: border-box استفاده کرده باشید.

حاشیه border

در مدل جعبه‌ای (Box Model)، حاشیه (Border) فضایی است که بین Padding و Margin قرار می‌گیرد و دور تا دور محتوای عنصر را احاطه می‌کند.

ویژگی‌های Border در CSS

ویژگی‌های Border به شما این امکان را می‌دهند که ظاهر مرزهای یک عنصر را تعیین کنید. این ظاهر می‌تواند شامل سبک‌های مختلف (مانند خط ممتد، نقطه‌چین، دوخطی و غیره) یا حتی یک تصویر باشد. در ادامه به بررسی سه ویژگی اصلی یعنی ضخامت (border-width)، سبک (border-style) و رنگ (border-color) می‌پردازیم.

۱. ویژگی border-width

این ویژگی ضخامت حاشیه را تعیین می‌کند. border-width یک ویژگی مختصرنویسی (Shorthand) است که می‌تواند ضخامت هر چهار طرف عنصر را به صورت همزمان تنظیم کند.

• مقادیر: می‌تواند به صورت عددی (با واحد px، em و...) یا مقادیر پیش‌فرض (thin ،medium ،thick) باشد.
• نکته: اگر این مقدار مشخص نشود، مقدار پیش‌فرض آن یعنی medium در نظر گرفته می‌شود.

مثال:

p {
  /* ترتیب: بالا، راست، پایین، چپ */
  border-width: medium 10px thick 15px;
}

۲. ویژگی border-style

این ویژگی نوع خطِ حاشیه را مشخص می‌کند. این مهم‌ترین ویژگی حاشیه است، زیرا بدون تعریف آن (به دلیل مقدار پیش‌فرض none) هیچ حاشیه‌ای نمایش داده نخواهد شد.

مقادیر رایج:

• none: بدون حاشیه.
• hidden: حاشیه مخفی (مشابه none).
• solid: خط صاف و ممتد.
• dashed: خط‌چین (تکه تکه).
• dotted: نقطه‌چین.
• double: دو خطی.
• groove: حالت برآمده (سه بعدی).
• ridge: حالت برجسته (سه بعدی).
• inset: حالت فرورفته (سه بعدی).
• outset: حالت بیرون‌زده (سه بعدی).

مثال:

p {
  border-style: dotted;
}

۳. ویژگی border-color

این ویژگی رنگ حاشیه را تعیین می‌کند. این ویژگی نیز یک Shorthand برای تنظیم رنگ هر چهار سمت عنصر است.

• نکته مهم: ویژگی border-color به تنهایی عمل نمی‌کند. حتماً باید قبل از آن یا همراه با آن، ویژگی border-style تعریف شده باشد تا حاشیه دیده شود.

مثال:

p {
  border-style: solid;
  border-color: #ff0000; /* قرمز */
}

۴. ویژگی مختصرنویسی border (Shorthand)

برای جلوگیری از طولانی شدن کد، می‌توان تمام ویژگی‌های بالا (ضخامت، سبک و رنگ) را در یک خط و تحت ویژگی border تعریف کرد.

مثال:

p {
  border: 5px solid #ff4500;
}

نکات مهم در مختصرنویسی:

۱. ترتیب مقادیر: ترتیب استاندارد معمولاً border-width ،border-style و سپس border-color است، اما جابجایی آن‌ها مشکلی ایجاد نمی‌کند. ۲. مقادیر حذف شده: اگر یکی از مقادیر نوشته نشود، مقدار پیش‌فرض آن اعمال می‌شود. ۳. رنگ پیش‌فرض: اگر رنگ را در ویژگی border ننویسید، مرورگر از رنگ متن عنصر (color) برای حاشیه استفاده می‌کند.

مثال (استفاده از رنگ متن برای حاشیه):

p {
  color: black;
  border: 5px solid; /* رنگ حاشیه به صورت خودکار سیاه می‌شود */
}

۴. عدم نمایش حاشیه: اگر مقدار border-style حذف شود، حاشیه نمایش داده نمی‌شود؛ زیرا مقدار پیش‌فرض آن none است.

مثال (بدون نمایش حاشیه):

p {
  /* به دلیل نبودن style، حاشیه‌ای نمایش داده نمی‌شود */
  border: 5px #00ff00; 
}