مقدمه مدل چارچوب CSS

مدل قاب CSS (Box Model) مقرر می‌کند که چگونه قاب عنصر محتوا را پردازش می‌کند،پدینگ،حاشیه و پدینگ روش.

مقدمه مدل چارچوب CSS

مدل چارچوب CSS

بخش داخلی‌ترین قاب عنصر محتوا واقعی است، که پدینگ مستقیماً محتوا را احاطه می‌کند. پدینگ پس‌زمینه عنصر را نمایش می‌دهد. لبه‌های پدینگ حاشیه هستند. خارج از حاشیه، پدینگ است که پیش‌فرض شفاف است و باعث نمی‌شود هیچ عنصری پس از آن مخفی شود.

توجه:پس‌زمینه به محدوده‌ای که از محتوا، پدینگ و حاشیه تشکیل شده اعمال می‌شود.

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

* {
  margin: 0;
  padding: 0;
}

در CSS، width و height به عرض و ارتفاع محدوده محتوا اشاره دارند. افزایش پدینگ، حاشیه و پدینگ باعث افزایش اندازه قاب عنصر نمی‌شود، بلکه باعث افزایش اندازه کل قاب عنصر می‌شود.

فرض کنید هر یک از اضلاع قاب 10 پیکسل پدینگ و 5 پیکسل پدینگ داشته باشد. اگر می‌خواهید این قاب عنصر به 100 پیکسل برسد، باید عرض محتوا را به 70 پیکسل تنظیم کنید. لطفاً تصویر زیر را ببینید:

مثال CSS چارچوب 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

توجه:پدینگ، حاشیه و پدینگ می‌توانند به همه اضلاع یک عنصر اعمال شوند، یا به یک اضلاع جداگانه اعمال شوند.

توجه:پدینگ می‌تواند منفی باشد و در بسیاری از موارد باید از پدینگ منفی استفاده شود.

سازگاری مرورگر

یک بار که DTD مناسب برای صفحه تنظیم شده است، اکثر مرورگرها مطابق با تصویر بالا محتوا را نمایش می‌دهند. اما نمایش IE 5 و 6 نادرست است. بر اساس استانداردهای W3C، فضای اشغال شده توسط محتوای عنصر توسط ویژگی width تنظیم می‌شود، در حالی که پدینگ و حاشیه اطراف محتوا به طور جداگانه محاسبه می‌شوند. متاسفانه، IE5.X و 6 در حالت怪ی از مدل غیر استاندارد خود استفاده می‌کنند. ویژگی width این مرورگرها نه عرض محتوا است، بلکه مجموع عرض محتوا، پدینگ و حاشیه است.

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

ترجمه اصطلاحات

  • element: عنصر.
  • padding: پدینگ داخلی، برخی از منابع آن را به عنوان پر کردن ترجمه می‌کنند.
  • border: کناره.
  • margin: پدینگ خارجی، برخی از منابع آن را به عنوان خالی یا کناره خالی ترجمه می‌کنند.

در codew3c، ما padding و margin را به طور یکپارچه به عنوان پدینگ داخلی و پدینگ خارجی می‌نامیم. فضای خالی در داخل کناره‌ها پدینگ داخلی است و فضای خالی در خارج کناره‌ها پدینگ خارجی است، آسان به خاطر سپردنی است:)