آشنایی با مفهوم Margin , Padding , Border در CSS

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد .

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است .
مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید .

Margin

فضای خالی در خارج از محیط Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار میگیرد .

div {
	margin:10px;
	}

    
div {
	margin-left:10px;
	margin-top:10px;
	margin-right:5px;
	margin-bottom:3px;	
	}

Border

مشخص کننده مرز خارجی Box خارج از محتوا ( Content ) و ( Padding ) که میتوان میزان ضخامت و رنگ و نوع آن را تعیین نمود .به صورت پیش فرض رنگ آن از رنگ زمینه Box پیروی میکند .

div {
	border:1px solid #888;
	}

div {
	border-bottom:2px solid #070;
	border-left:2px double #070;
	border-top:2px dashed #070;
	border-right:2px dotted #070;
	}

Padding

فضای خالی مابین محتوا و مرز ( Border ) داخلی Box ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی میکند .

div {
	padding:15px;
	}

div {
	padding-left:5px;
	padding-top:20px;
	padding-right:8px;
	padding-bottom:7px;	
	}

Content

محتویات داخای یک Box ، که میتواند شامل متن ، تصویر ، لیست و یا جدول و … باشد .

نحوه محاسبه اندازه یک Box

برای طراحی و چینش دقیق اجزاء در طراحی یک صفحه وب ، تمامی اجزاء جزء به جزء با دقت 1px محاسب میشوند و با توجه به این موضوع نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم است .
با استفاده از خصوصیات width , height اندازه اجزاء ( Box ) تعیین میگردند ، اما به این نکته توجه کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که توسط خصوصیات Width و height تعیین شده است متفاوت خواهد بود . در واقع با استفاده از width و height تنها اندازه محتوا ( Content ) تعیین شده است و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند .
این نکته مهم را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با استفاده از فرمول زیر محاسبه می شود

width = width + left padding + right padding + left border + right border + left margin + right margin

height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin