آشنایی با فاصله های اطراف یک موضوع

برای تمام موضوعاتی  که در صفحه وب قرار می دهید می توانید  مستطیلی فرضی در اطراف ان  در نظر بگیرید

و این مستطیل شامل این موارد است

1: margin

2:border

3:padding

4:محتویات اصلی

 

margin : فاصله یک موضوع تا موضوعات اطراف آن مثلا فاصله یک تصویر تا متن سطر قبل یا جدول زیر ان یا تصویر سمت راست ان یا لیست سمت چپ ان.

margin نمی تواند زمینه رنگی داشته باشد بلکه کاملا بی رنگ بوده و فقط فاصله را از موضوعات اطراف مشخص می کند

border : حاشیه ای که بصورت یک خط رنگی با پهنای دلخواه در اطراف موضوع قرار می گیرد مثل خطی که با پهنای 5 نقطه در اطراف تصویر قرار می گیرد

padding : فصله محتوای داخل یک موضوع از خط حاشیه دور ان مثلا فاصله سلولهای درون یک جدول از خط دور جدول

رنگ padding همان رنگ زمینه یا background خواهد بود

content  : فاصله محتویات یک موضوع از لبه های معمول ان موضوع مثل فاصله محتویات درون یک سلول جدول از لبه های ان سلول . که می تواند شامل متن یا تصویر باشد
 
width , height

 

 

 وقتی شما با سبک های سی اس اس میزان width , height موضوعات را مشخص می کنید در واقع عرض و ارتفاع محدوده محتویات یا content را مشخص می نمائید
 اما اگر میزان تاثیر گذار عرض و ارتفاع موضوعی را بخواهید باید علاوه بر عرض و ارتفاع میزان padding , margin , border را نیز محاسبه نمائید
مثال 1 : در این مثال عرض تاثیر گذار بر محتویات صفحه برابر 300 پیکسل است
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

حال بیائید با هم این عدد را محاسبه نمائیم :

عرض خود محتویات موضوع برابر 250 نقطه

فاصله padding چپ و راست برابر 20 نقطه

حاشیه چپ و راست برابر 10 نقطه

فاصله چپ و راست margin  برابر 20 نقطه

که کچموع ان می شود 300 نقطه

مثال 2 :

فرض کنید تصویری بصورت زیر داریم

حال قرار است متنی را با استفاده از تگ div زیر این تصویر قرار دهیم با این ویژگیها :

عرض متن برابر 220 نقطه

فاصله اطراف متن تا border یا خط دور متن برابر 10 نقطه

ضخامت خط دور متن برابر  5 نقطه به رنگ خاکستری و خط یکپارچه

فاصله بعد از border از موضوعات اطراف متن مثل فاصله تا تصویر هیچ باشد

 

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

مشاهده و اجرای برنامه کامل

خط سبز : همان margin یا فاصله تا عناصر چهار طرف  اطراف است

خط قرمز : عرض یا width متن است

خط مشکی : ارتفاع یا height متن است

خط نارنجی : padding یا فاصله چهار طرف محتویات تا border است

عرض نهایی یک عنصر در صفحه وب با فرمول زیر بدست می اید

عرض موضوع یا width

+

padding راست

+

padding  چپ

+

margin راست

+

margin چپ

 

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

ارتفاع موضوع یا height

+

padding بالا

+

padding  پائین

+

margin بالا

+

margin پائین

 

 توجه داشته باشید که ما می توانیم تمام margin ها و  padding ها و border های چهار طرف را یک اندازه یا به اندازه های محتلف تعیین نمائیم بعدا با این مطالب اشنا می شوید