در دنیای طراحی وب با CSS، هر عنصر HTML (مانند پاراگراف <p>, تیتر <h1>, تصویر <img>, یا حتی <div>) به عنوان یک جعبه مستطیلی در نظر گرفته می‌شود. درک چگونگی ساختار و رفتار این جعبه‌ها، که به آن مدل جعبه‌ای (Box Model) گفته می‌شود، برای کنترل دقیق چیدمان عناصر و فضای صفحه ضروری است.

مدل جعبه‌ای CSS از چهار لایه اصلی تشکیل شده است که هر کدام فضای خاصی را اشغال می‌کنند:

۱. محتوا (Content)

  • چیست؟ این مرکز جعبه است و شامل محتوای واقعی عنصر شما می‌شود. برای یک پاراگراف، این متن است؛ برای یک تصویر، این خود تصویر است؛ برای یک جعبه div، می‌تواند شامل متن، تصاویر، یا حتی عناصر دیگر باشد.
  • ابعاد: ابعاد محتوا معمولاً با ویژگی‌های width (عرض) و height (ارتفاع) تعیین می‌شود. اگر این ویژگی‌ها تعیین نشوند، عرض معمولاً به اندازه فضای موجود کشیده می‌شود و ارتفاع بر اساس محتوای درون آن تنظیم می‌گردد.

۲. حاشیه داخلی (Padding)

  • چیست؟ فضایی است که بین ناحیه محتوا و قاب (Border) عنصر قرار دارد. پدینگ باعث ایجاد فاصله بین محتوای اصلی و مرزهای بیرونی‌تر جعبه می‌شود.
  • ویژگی‌ها: می‌توانید پدینگ را در چهار جهت (بالا، راست، پایین، چپ) تنظیم کنید:
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • همچنین می‌توان از ویژگی خلاصه‌شده padding استفاده کرد.
  • نکته مهم: ناحیه پدینگ، بخشی از رنگ پس‌زمینه عنصر است. یعنی اگر عنصری رنگ پس‌زمینه داشته باشد، آن رنگ تا لبه قاب (Border) ادامه پیدا می‌کند و ناحیه پدینگ نیز با آن رنگ پر می‌شود.

۳. قاب (Border)

  • چیست؟ خطی است که اطراف ناحیه محتوا و پدینگ قرار می‌گیرد. این همان چیزی است که مرز قابل مشاهده یک جعبه را مشخص می‌کند.
  • ویژگی‌ها: برای تعریف قاب، حداقل به یکی از سه ویژگی زیر نیاز دارید:
  • border-width: ضخامت قاب (مثلاً 2px, medium, thin).
  • border-style: سبک خط قاب (مانند solid, dashed, dotted, double, none).
  • border-color: رنگ قاب.
  • مانند پدینگ، می‌توان قاب را برای هر جهت به صورت جداگانه (مانند border-top-width) یا با استفاده از ویژگی خلاصه‌شده border تنظیم کرد.

۴. حاشیه خارجی (Margin)

  • چیست؟ فضایی است که در خارج از قاب (Border) عنصر قرار دارد. مارجین، فاصله بین جعبه فعلی و جعبه‌های دیگر در اطراف آن را تعیین می‌کند.
  • ویژگی‌ها: مشابه پدینگ، مارجین نیز را می‌توان در چهار جهت تنظیم کرد:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • و همچنین با استفاده از ویژگی خلاصه‌شده margin.
  • نکته مهم: مارجین‌ها شفاف هستند و رنگ پس‌زمینه عنصر والد را به خود می‌گیرند. این باعث می‌شود که مارجین‌ها فقط فضا را اشغال کنند و خودشان رنگی نداشته باشند.

مفهوم box-sizing

به طور پیش‌فرض، وقتی عرض (width) و ارتفاع (height) یک عنصر را تعیین می‌کنید، این مقادیر فقط به ناحیه محتوا اعمال می‌شوند. پدینگ و قاب به این ابعاد اضافه می‌شوند و جعبه نهایی بزرگتر از مقدار تعیین شده خواهد بود.

  • رفتار پیش‌فرض (box-sizing: content-box;):

  • عرض کلی = width (محتوا) + padding-left + padding-right + border-left + border-right

  • ارتفاع کلی = height (محتوا) + padding-top + padding-bottom + border-top + border-bottom

  • رفتار border-box (box-sizing: border-box;):

  • این تنظیم، رفتار مدل جعبه‌ای را تغییر می‌دهد. در این حالت، width و height شامل محتوا، پدینگ و قاب می‌شوند. این روش اغلب برای طراحی واکنش‌گرا و پیش‌بینی‌پذیرتر، بسیار مفید است.

  • عرض کلی = width (که شامل محتوا، پدینگ و قاب است)

  • ارتفاع کلی = height (که شامل محتوا، پدینگ و قاب است)

کلیدواژه ها : مدل جعبه‌ای CSS-پدینگ-مارجین-قاب-عرض-ارتفاع-CSS Box Model-Padding-Margin-Border-Width-Height-