آموزش مدل جعبه ای(Box Model) در CSS

همه ی عناصر HTML می توانند بعنوان یک جعبه(box) در نظر گرفته شوند.

آموزش مدل جعبه ای(Box Model) در CSS

وقتی که در CSS، صحبت از طراحی(design) و چینش(layout) به میان می آید، اصطلاح مدل جعبه ای(box model) مطرح می شود. مدل جعبه ای، در اصل یک جعبه(لایه) است که به دور هر عنصر HTML پوشیده می شود. در مدل جعبه ای جعبه ها(لایه ها) شامل موارد زیر هستند:
1. content: محتوا
2. padding : فاصله درونی

3. border : کادر

4. margin : مارجین یا فاصله بیرونی

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

عرض(Width) و طول(Height) یک عنصر

برای اینکه عرض(width) و ارتفاع(height) یک عنصر را به درستی در تمام مرورگرها تنظیم کنیم، نیاز داریم بدانیم که مدل جعبه ای(box model) چگونه کار می کند.

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

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

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

320px (content عرض ناحیه)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
= 350px (عرض کلی)

  50px (content ارتفاع ناحیه)
+ 20px (top padding + bottom padding)
+ 10px (top border + bottom border)
= 80px (ارتفاع کلی)

عرض(width) کلی یک عنصر باید به صورت زیر محاسبه شود:

عرض کلی عنصر = width + left padding + right padding + left border + right border

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

ارتفاع کلی عنصر = height + top padding + bottom padding + top border + bottom border

نکته: ویژگی margin ،روی فضای کلی ای که جعبه(box) روی صفحه اشغال می کند تاثیر می گذارد. اما این margin به سایز حقیقی جعبه(box) اضافه نمی شود. عرض و ارتفاع کلی جعبه(total width and height) تا کادر(border) متوقف می شود.