مفهوم Box Model در CSS

تمام عناصر HTML میتوانند به عنوان یک باکس در نظر گرفته شوند. در CSS اصطلاح Box model زمانی استفاده میشود که در مورد طراحی و طرح بندی صحبت میکنیم. در این فصل به مفهوم Box model میپردازیم


box model در CSS به باکسی گفته میشود که هر عنصر HTML  در آن قرار میگیرد که شامل margin ها، border ها ، padding و محتوای خود عنصر است.

در تصویر نشان داده شده در زیر مفهوم box model تشریح شده است :

boxmodel

 

توضیح قسمت های مختلف :

  • Content - محتوای box ، جایی که متون و تصاویر قرار میگیرند
  • Padding - فضایی که اطراف محتوای یک عنصر قرار میگیرد. 
  • Border - خط دوری که بین padding و content قرار میگیرد
  • Margin - فضایی که بیرون از border اطراف عنصر HTML قرار میگیرد
     

box model به ما اجازه میدهد که اطراف عنصر border اضافه کنیم و فضا بین عناصر مختلف ایجاد کنیم :

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
خودتان امتحان کنید

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

به منظور مقداردهی صحیح عرض و ارتفاع یک عنصر درتمام مرورگر ها، نیاز است بدانید که box model چطور کار میکند.

نکته مهم : وقتی صفات width و height را برای یک عنصر با استفاده از CSS مقدار دهی میکنید، شما فقط عرض و ارتفاع را برای قسمت content تنظیم میکنید. برای محاسبه ی اندازه ی کلی یک عنصر ، باید مقادیر margin ، border و padding را به مقدار مورد نظر اضافه کنید.

 

فرض کنید که میخواهید یک عنصر div را طوری استایل دهی کنید که مجموعا عرضی برابر 350 پیکسل داشته باشد :

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}
خودتان امتحان کنید

 محاسبه ی عرض به صورت زیر است :

320 پیکسل (عرض)
+ 20 پیکسل (padding سمت راست + padding سمت چپ)
+ 10 پیکسل (border سمت راست + border سمت چپ) 
+ 0 پیکسل   (margin سمت راست + margin سمت چپ)
= 350 پیکسل

مجموع عرض یک عنصر به شکل زیر محاسبه میشود :

مجموع عرض یک عنصر  = width + left padding + right padding + left border + right border + left margin + right margin

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

مجموع ارتفاع یک عنصر = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

نکته : اینترنت اکسپلورر 8 و نسخه های قدیمی تر آن padding و border را جز عرض یک عنصر به حساب می آورند. برای حل این مشکل تگ نوع سند <DOCTYPE html!> را به صفحه ی HTML خود اضافه کنید.

منتشر شده در ۲۷ مرداد ۱۳۹۶ حمید رضا ملکی ۱۱۹۶ بازدید
دیدگاه ها
وحید پنجشنبه ۱۱ مرداد ۱۳۹۷

سلام در مثال بالا به ، div 320+border10+padding5=345 چطوری محاسبه کردین شده 350 پیکسل .

حمید رضا ملکی پنجشنبه ۱۱ مرداد ۱۳۹۷
سلام. همانطور که مشخص است عرض خود عنصر div برابر با 320 پیکسل است. از طرفی border برای سمت راست و چپ عنصر هم دارای مقدار 10 است که مجموعا 20 پیکسل میشود. padding سمت راست و چپ هم دارای مقدار 5 پیکسل بوده که مجموعا 10 پیکسل میشود و نتیجه : 320 + (10 + 10) + (5 + 5) = 350 پیکسل
mansoore چهار شنبه ۲۰ تیر ۱۳۹۷

با سلام و ممنون از زحماتتون فکر کنم یه جابجایی کوچولو اتفاق افتاده عرض کلی یک عنصر به صورت زیر محاسبه می شود: Total element width = width + left padding + right padding + left border + right border + left margin + right margin ارتفاع کلی یک عنصر به صورت زیر محاسبه می شود: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

حمید رضا ملکی پنجشنبه ۲۱ تیر ۱۳۹۷

سلام. ممنون از دقت نظر شما. اصلاح شد

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید