آموزش برنامه نویسی وب🌐: بخش html قسمت هشتم(مدل جعبه‌ای CSS) 📦

باکس مدل چیست؟ و چه اجزایی دارد؟

مدل جعبه‌ای CSS یا CSS Box Model یکی از مهم ترین مفاهیم در طراحی وب است. هر عنصر HTML در صفحه، به صورت یک جعبه در نظر گرفته می‌شود که شامل چهار بخش اصلی است: محتوا یا c، پدینگ (Padding)، حاشیه (Border) و مارجین (Margin).

قسمت قبلی به عکس زیر بنگرید: مدل جعبه‌ای سی اس اس

همانطور که در تصویر بالا مبینید، هر المنت (عنصر) در اچ تی ام ال، بعنوان یک جعبه در نظر گرفته میشود.

اجزای این جعبه عبارتند از:

محتوا (C): متن یا رسانه درون عنصر HTML که بین تگ باز و بسته قرار میگیرد.
پدینگ (Padding): فاصله بین محتوا و حاشیه‌ی(Border) عنصر.
حاشیه (Border): حاشیه‌ای که دور تا دور عنصر را فرا می‌گیرد.
مارجین (Margin): فاصله بین عنصر و عناصر اطراف آن.

مثال های Box Model

این مثال فقط شامل محتوا است و هیچ پدینگ، حاشیه یا مارجینی ندارد.


<div style="width: 200px; height: 100px; background-color: lightgray; text-align: center; line-height: 100px;">
    این یک جعبه ساده است.
</div>

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


<div style="width: 200px; height: 100px; background-color: lightgreen; padding: 20px; text-align: center;">
    این جعبه با پدینگ ۲۰ پیکسل است.
</div>

حاشیه به دور جعبه اضافه می‌شود و می‌تواند رنگ و ضخامت مختلفی داشته باشد.


<div style="width: 200px; height: 100px; background-color: lightpink; border: 5px solid blue; text-align: center; line-height: 100px;">
    این جعبه با حاشیه آبی ۵ پیکسل است.
</div>

مدل جعبه‌ای CSS و نحوه کار با Padding، Margin، و Border

تأثیر هر بخش بر روی اندازه عنصر

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

فرمول محاسبه اندازه واقعی عنصر

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

پهنای واقعی: طول محتوا+ پدینگ چپ+ پدینگ راست+ حاشیه چپ+ حاشیه راست

ارتفاع واقعی: ارتفاع محتوا+ پدینگ بالا+ پدینگ پایین+ حاشیه بالا+ حاشیه پایین

مثال:


        p {
          width: 320px;
          height: 50px;
          padding: 10px;
          border: 5px solid gray;
        }

در این مثال، اندازه واقعی عنصر p برابر با:

پهنای عنصر: 320 + 10 + 10 + 5 + 5 = 350 پیکسل
ارتفاع عنصر: 50 + 10 + 10 + 5 + 5 = 80 پیکسل

انواع مختلف مقداردهی Padding و Margin

padding: 15px; - مقدار padding برای چهار طرف عنصر ۱۵ پیکسل خواهد بود.
padding: 10px 15px 13px 8px; - به ترتیب برای بالا، راست، پایین و چپ اعمال می‌شود.
padding: 8px 10px 8px; - برای بالا، راست و چپ، پایین اعمال می‌شود.
padding: 15px 10px; - برای بالا و پایین، و راست و چپ.

رفع مشکل افزایش اندازه عنصر با استفاده از box-sizing

برای جلوگیری از افزایش اندازه واقعی عنصر به دلیل وجود padding و border، از ویژگی box-sizing: border-box; استفاده می‌شود. این ویژگی باعث می‌شود که padding و border درون مقدار width و height در نظر گرفته شوند.

نمونه کد:


        <head>
             <style>
                * {
                    box-sizing: border-box;
                }
              </style>
          </head>

با استفاده از این ویژگی، مقدار width و height دقیقا همان مقادیری خواهند بود که برای عنصر تنظیم کرده‌ایم.

مرکز چین کردن عناصر بلاکی

برای وسط‌چین کردن عناصر بلاکی، می‌توان از margin: 0 auto; استفاده کرد.

مثال:


        <div style="width: 50%; margin: 0 auto; padding: 10px; border: 2px solid black;">
            عنصر وسط‌چین شده
        </div>

قسمت بعدی