مفهوم 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 خود اضافه کنید.

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

هنوز دیدگاهی ثبت نشده