مدل جعبه ای (CSS Box model)

در این روش هر کدام از عناصر HTML به عنوان جعبه در نظر گرفته می شوند. هنگامی که در css از طرح بندی و طراحی صحبت می شود اصطلاح مدل جعبه ای یا همان box model بکار گرفته می شود.

در این مدل اساسا هر کدام از عناصر HTML در داخل یک جعبه قرار دارند که این جعبه پارامتر هایی از قبیل : margin, border, padding را می تواند علاوه بر محتوای اصلی داشته باشد.

مدل جعبه ای به ما این امکان را می دهد که به دور عنصر مورد نظر کادر بکشیم (border) و فاصله ی بین عنصر با سایر عناصر را معین کنیم (margin)و همینطور فاصله ی محتوای داخل، از دیواره ی عنصر را مشخص کنیم (padding).

تفاوت بین پارامتر های بیان شده در تصویر بالا:

Content : محتوای اصلی که شامل متن و یا تصویر می باشد.

Padding : فاصله ی بین محتوا تا دیواره ی جعبه که ناحیه ای شفاف (transparent) می باشد.

Border : کادر دربردارنده محتوا و padding می باشد.

Margin : ناحیه شفاف (transparent) خارج از border. (در واقع فاصله بین عنصر از اطراف)

به مثال زیر توجه نمایید:

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

padding: 25px;

border: 25px solid orange;

margin: 25px;

}

</style>

</head>

<body>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>

</html>

عرض و ارتفاع دادن به عناصرتوسط دو خاصیت width, height :

به همگام تنظیم width, height یک عنصر، برای اینکه به درستی در تمام مرورگر ها نمایش داده شود، باید بدانید که مدل جعبه ای چگونه کار می کند.

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

به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 320px;

padding: 10px;

border: 5px solid gray;

margin: 0;

}

</style>