در طراحی سایت، تمام عنصرهای HTML می توانند به عنوان یک جعبه در نظر گرفته شوند. در CSS، اصطلاح Box Model هنگامی که در حال صحبت راجع به طراحی صفحات (طراحی سایت) هستیم، استفاده می شود. box model یک جعبه است که دور هر عنصر HTML قرار می گیرد که شامل: margins, borders, padding و خود محتوا می باشد. این بدان معناست که در اطراف هر عنصر html مانند div, p, h1 و … خواص padding، Border، Margin و محتوای خود عنصر قرار دارند و می توانیم آنها را به دلخواه تنظیم کنیم. تصویر بسیار مهم زیر مفهوم باکس مدل را نشان می دهد:
برای درک بهتر مفهوم باکس مدل در طراحی سایت، یک مثال را باهم بررسی می کنیم. به عنوان مثال یک خانه را در نظر می گیریم:
وسیله ها و اسباب داخل خانه را می توان به عنوان محتوا (content)، فاصله ی بین وسیله ها تا دیوارها را (padding)، دیوارها و پنجره ها را (border) و فضای بیرونی متعلق به خانه مثلا حیاط دور خانه را (margin) در نظر گرفت.
اجزای Box Model:
- Content - محتوای درون باکس، ناحیه ای است که محتوای عنصر در آن قرار می گیرد. اندازه این ناحیه را می توان توسط ویژگی های width و height مشخص کرد.
- Padding - فضایی را دور محتوا تعبیه می کند. این فضا در داخل باکس وجود دارد. به عبارتی به فاصله بین محتوا و حاشیه (border) عنصر HTML گفته می شود. مانند فضای میان وسایل خانه تا دیوار های خانه
- Border - حاشیه ی اطراف عنصر را مشخص می کند. مانند دیوارهای خانه
- Margin - فاصله بین عنصر با عناصر اطراف آن را کنترل می کند. مثلا فاصله یک خانه با خانه های دیگر را تعیین می کند.
درک مفهوم CSS Box Model و استفاده از آن در طراحی سایت بسیار مهم است پس برای درک بهتر مطلب، به مثال زیر توجه کنید:
در این مثال، متنی که درون عنصر div وجود دارد یک فاصله 50px نسبت به لبه های باکس گرفته است. سپس یک border 15px به رنگ سبز اطراف باکس را احاطه کرده است. و در نهایت یک فاصله 20px از div تا دیگر عناصر در نظر گرفته شده است. نتیجه کد بالا به شکل زیر است:
طول و عرض یک عنصر
در صفحات وب، برای اینکه بتوانید طول و عرض یک عنصر را در تمام مرورگرها بصورت درست تنظیم کنید، باید با نحوه عملکرد Box Model آشنا باشید. این نکته را به خاطر بسپارید که زمانی که شما به یک عنصر padding=10px می دهید، این 10px در هر چهار طرف عنصر (top, right, bottom, left) اعمال می شود.
در این مثال، عنصر div به طور واضح، عرض 320px دریافت کرده است. اما با توجه به میزان border و padding دریافت شده توسط این عنصر، مقدار عرض بیشتری را اشغال می کند. در تصویر زیر نتیجه کد بالا مشخص شده است:
اما چگونگی محاسبه عرض این عنصر (div) به صورت زیر است. با توجه به این موضوع که عنصر div یک padding=10px گرفته است و این میزان padding به همه اطراف عنصر افزوده می شوند پس در مجموع 20px به عرض این عنصر افزوده می شود. همینطور در مجموع border های چپ و راست، 10px دیگر نیز به عرض این عنصر افزوده شده و در نهایت عرض آن 350px خواهد شد.
نحوه محاسبه عرض کل یک عنصر :
عرض کل عنصر = عرض + left padding + right padding+ left border + right border + left margin + right margin +
نحوه محاسبه طول کل یک عنصر:
طول کل عنصر = طول + top padding + bottom padding + top border + bottom border + top margin + bottom margin
