margins and paddings

از ویژگی های margin و padding برای تعیین محل قرار گیری عنصر و ایجاد فضا در اطراف آن استفاده می کنیم.

Padding

منظور از padding فضای بین محتوای یک عنصر و حاشیه آن است. این فضا را با استفاده از ویژگی padding تنظیم می کنیم. این ویژگی را می توان به هر عنصر نسبت داد و خصوصیات خود را از عنصر والد به ارث نمی برد.

padding (1-4) |padding-top | padding-right | padding-bottom | padding-left :
<length> | <percentage>

در هر سمت به طور جداگانه 4 ویژگی برای تنظیم کردن padding وجود دارد. در مثال زیر لبه های عمودی (vertical margins) یعنی بالا و پایین (top & bottom) 10 پیکسل خواهند بود و لبه های افقی (horizontal margins) صفر خواهند بود:

padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;

با استفاده از ویزگی padding می توانیم تمام اعلان بالا را در یک اعلان ساده خلاصه کنیم. در این حالت مقادیر مربوط به padding در جهت عقربه های ساعت مشخص می شوند: top, right, bottom, left.

padding 10px 0px 10px 0px;

مثل بسیاری از ویژگی های دیگر که به box model مربوط می شوند ویژگی padding نیز دارای یک الی چهار مقدار است که مربوط به گوشه های جعبه یک عنصر می شوند. اگر کمتر از 4 مقدار را مشخص کرده باشیم، مقادیر مانند شکل زیر تکرار خواهند شد:

تصویر بالا: ترتیب تکرار شدن ویژگی ها

به عنوان مثال اگر دو مقدار را مشخص کرده باشیم، مقدار اول برای padding مربوط به بالا و پایین استفاده می شود و مقدار دوم برای padding مربوط به راست و چپ. با این روش می توان مثال قبلی را حتی کوتاه تر نیز نوشت:

padding 10px 0px;

توجه داشته باشید که ویژگی padding قسمتی از پس زمینه عنصر به حساب می آید و بر اساس ویژگی های اختصاص داده شده به پس زمینه مورد تاثیر قرار می گیرد، در حالی که این نکته که margin همیشه شفاف است.

ویژگی margin

لبه (margin) فضای اطراف border یک عنصر است که ویژگی های مربوط به آن با استفاده از دستور زیر تعیین می شود. این ویژگی ها را می توان به هر عنصری اعمال کرد و خصوصیات آن از عنصر والد به ارث برده نمی شود، با این تفاوت که لبه های عمودی (vertical margins) بر روی عناصر جایگزین نشده inline اثری ندارد.

margin (1-4) | margin-top | margin-right | 
margin-bottom | margin-left:
<length>| <percentage> | auto

برای margin و padding می توان از درصد هم استفاده کرد، که اندازه آنها به نسبت طول و عرض عنصر نگهدارنده تعیین می شود. بر خلاف padding، margin می تواند مقدار منفی داشته باشد، که به عناصر اجازه می دهد با یکدیگر همپوشانی داشته باشند. مقدار auto به مروگر این اجازه را می دهد تا مقدار margin را به صورت خودکار انتخاب کند.

مثل ویژگی های padding و border، ویژگی margin را می توان با یک الی چهار مقدار تنظیم کرد. در مثال زیر margin بالا و پایین به اندازه 1سانتی متر تعیین شده و margin بالا به اندازه صفر تنظیم می شود:

margin: 1cm 0;

لبه های بالا و پایین در عناصر مجاور به اشتراک گذاشته می شود، بنابراین فاصله عمودی بین دو جعبه مجموع دو لبه نیست، بلکه فقط به اندازه بزرگترین جعبه است. بنابراین فاصله بین دو عنصر <div> در مثال پایین فقط 10 پیکسل است:

<div style=”margin-bottom: 5px;”>جعبه بالا
<div style=”margin-top: 10px;”>جعبه پایین