مدل کادر CSS

مدل کادر CSS

تمام عناصر HTML می‌توانند به عنوان قاب در نظر گرفته شوند. در CSS، هنگام صحبت از طراحی و چیدمان، از اصطلاح «مدل جعبه» یا «مدل قاب» استفاده می‌شود.

مدل قاب CSS به طور اساسی یک قاب است که هر عنصر HTML را احاطه می‌کند. شامل: حاشیه، لبه، پادینگ و محتوای واقعی. تصویر زیر مدل قاب را نشان می‌دهد:

مدل کادر CSS

توضیحات برای بخش‌های مختلف:

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

مدل قاب به ما امکان می‌دهد تا لبه‌هایی اطراف عناصر اضافه کنیم و فضا بین عناصر را تعریف کنیم.

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

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

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

* {
  margin: 0;
  پادینگ: 0;
}

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

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

مثال مدل کادر CSS 
#box {
  عرض: 70px;
  حاشیه: 10px;
  پادینگ: 5px;
}

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

توضیح:حاشیه‌ها می‌توانند منفی باشند و در بسیاری از موارد از حاشیه‌های منفی استفاده می‌شود.

مثال

نمایش مدل قاب:

div {
  عرض: 300px;
  لبه: 15px خط سبز;
  پادینگ: 50px;
  حاشیه: 20px;
}

bes yar dar amal bedan

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

برای تنظیم صحیح عرض و ارتفاع یک عنصر در تمام مرورگرها، باید بدانید که مدل قاب چگونه کار می‌کند.

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

مثال

عرض کل عنصر 350px خواهد بود:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

bes yar dar amal bedan

hesab shode ast:

320px(hegmat)
+ 20px (margh-e sotoh+chapi)
+ 10px (margh-e chapi+chapi)
+ 0px (margh-e chapi+chapi)
= 350px

hegmat-e tamum-e element ba in rav mishavad:

hegmat-e tamum-e element = andaz + entezar-e sotoh-e chapi + entezar-e sotoh-e chapi + margh-e chapi + margh-e chapi + margh-e chapi + margh-e chapi + margh-e chapi + margh-e chapi

hegmat-e tamum-e element ba in rav mishavad:

hegmat-e tamum-e element = hegmat + entezar-e sotoh-e uste + entezar-e sotoh-e ast