مدل جعبه CSS یا Box Model

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

مدل جعبه یا Box Model چیست؟

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

1. محتوا (Content):

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

2. حاشیه (Padding):

• فضای خالی بین محتوا و لبه (border) عنصر را تشکیل می‌دهد.
• به وسیله ی خواص padding-top، padding-right، padding-bottom و padding-left در CSS قابل تنظیم است.

3. لبه (Border):

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

4. حاشیه (Margin):

• فضای خالی بین لبه (border) عنصر و دیگر عناصر اطراف آن را تشکیل می‌دهد.
• توسط خواص margin-top، margin-right، margin-bottom و margin-left در CSS قابل تنظیم است.

در مثال زیر ، تمام خصوصیاتی را که مدل جعبه CSS را تشکیل می دهند می بینید:

div {
    width: 200px;
    border: 35px solid blue;
    padding: 35px;
    margin: 35px;
}

حاشیه جعبه CSS

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

• margin-top: فاصله لبه ی بالایی عنصر تا عنصر بالایی را تعیین می‌کند.
• margin-right: فاصله لبه ی سمت راست عنصر تا عنصر سمت راست را تعیین می‌کند.
• margin-bottom: فاصله لبه ی پایینی عنصر تا عنصر پایینی را تعیین می‌کند.
• margin-left: فاصله لبه ی سمت چپ عنصر تا عنصر سمت چپ را تعیین می‌کند.

می‌توانید برای هر کدام از این خواص مقادیر دلخواه خود را به واحدهای مختلف مانند پیکسل (px)، درصد (%) یا واحدهای دیگر CSS وارد کنید. حاشیه به صورت فضای خالی در اطراف عنصر نمایش داده می‌شود. رنگ پیش‌فرض حاشیه شفاف است، اما می‌توانید با استفاده از خاصیت background-color رنگ آن را تغییر دهید.

• حاشیه در عرض و ارتفاع نهایی عنصر لحاظ نمی‌شود. برای محاسبه عرض و ارتفاع نهایی باید حاشیه را به عرض و ارتفاع محتوا، padding و border اضافه کنید.
• اگر برای چندین عنصر از مقادیر یکسان برای حاشیه استفاده می‌کنید، می‌توانید از اختصارات margin: 10px یا margin: 10px 20px 30px 40px برای تعریف مقادیر به صورت مجزا برای هر جهت استفاده کنید.
• مقادیر منفی برای حاشیه نیز قابل استفاده است. این کار باعث می‌شود تا عنصر به اندازه مقدار منفی تعیین شده به عناصر دیگر نزدیک‌تر شود.

مدل جعبه پدینگ padding

پدینگ در مدل جعبه CSS، فضای خالی بین محتوای یک عنصر و لبه (border) آن را تشکیل می‌دهد. این فضا به شما امکان می‌دهد تا بدون تغییر در اندازه کلی عنصر، فاصله بین محتوا و لبه را به طور دلخواه تنظیم کنید. این مثال نحوه تعریف چهار طرف یک عنصر را با یک مقدار نشان می دهد:

p {
   padding: 30px;
}

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

• padding-top: فاصله لبه ی بالایی محتوا تا لبه ی بالایی عنصر را تعیین می‌کند.
• padding-right: فاصله لبه ی سمت راست محتوا تا لبه ی سمت راست عنصر را تعیین می‌کند.
• padding-bottom: فاصله لبه ی پایینی محتوا تا لبه ی پایینی عنصر را تعیین می‌کند.
• padding-left: فاصله لبه ی سمت چپ محتوا تا لبه ی سمت چپ عنصر را تعیین می‌کند.

می‌توانید برای هر کدام از این خواص مقادیر دلخواه خود را به واحدهای مختلف مانند پیکسل (px)، درصد (%) یا واحدهای دیگر CSS وارد کنید. پدینگ به صورت فضای خالی بین محتوا و لبه ی عنصر نمایش داده می‌شود. رنگ پیش‌فرض پدینگ شفاف است، اما می‌توانید با استفاده از خاصیت background-color رنگ آن را تغییر دهید.

• پدینگ در عرض و ارتفاع نهایی عنصر لحاظ می‌شود. به این معنی که عرض و ارتفاع نهایی عنصر با جمع کردن عرض و ارتفاع محتوا، دو برابر مقدار padding و دو برابر مقدار border محاسبه می‌شود.
• اگر برای چندین عنصر از مقادیر یکسان برای پدینگ استفاده می‌کنید، می‌توانید از اختصارات padding: 10px یا padding: 10px 20px 30px 40px برای تعریف مقادیر به صورت مجزا برای هر جهت استفاده کنید.
• مقادیر منفی برای پدینگ نیز قابل استفاده است. این کار باعث می‌شود تا محتوا به اندازه مقدار منفی تعیین شده به لبه‌ی عنصر نزدیک‌تر شود.

محتوا جعبه

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

• اندازه: اندازه باکس محتوا را می‌توان با استفاده از خواص width و height در CSS تعیین کرد.
• موقعیت: موقعیت باکس محتوا نسبت به سایر عناصر صفحه توسط خواص position و top، left، bottom و right در CSS کنترل می‌شود.
• فونت: ظاهر متن داخل باکس محتوا را می‌توان با استفاده از خواص مربوط به فونت مانند font-family، font-size، font-weight و color در CSS تنظیم کرد.
• پس زمینه: رنگ پس زمینه و تصویر پس زمینه باکس محتوا را می‌توان با استفاده از خواص background-color و background-image در CSS تعیین کرد.

div {
    width: 330px;
    padding: 30px;
    border: 40px solid blue;
    margin: 0; 
}

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.