خاصیت padding در CSS

شما با استفاده از خاصیت padding در CSS می توانید به باکس (بلاک یا تگ) خود فاصله ای تا متن اضافه کنید. این خاصیت بسیار به کار برده می شود ولی ایراداتی هم دارد. برای مثال ممکن است اگر تازه کار باشید برای استفاده از این خاصیت دچار مشکل شوید و صفحه ای که طراحی می کنید از اندازه های نا مناسب در آید.

توجه کنید که padding یک لایه اضافه می کند که به width باکس اضافه می کند نه این که width را کمتر کند. این اشتباه بسیاری از کدنویس های جوان است!

مکان padding در باکس

برای تعیین مکان padding می توانید به زیر نگاه کنید. توجه داشته باشید که دور padding یک کادر وجود دارد که همان Border می باشد. بر خلاف margin ، این خاصیت داخل border می باشد در حالی که margin بیرون از border می باشد.

مقادیر padding

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

padding: padding-top padding-right padding-bottom padding-left ;

هر کدام از مقدار ها:

این مقدار ها هر کدام می تواند یکی از این گزینه ها باشد:

• عدد + واحد : برای مثال 15px یا 10% یا 5em و ...
• inherit : هیچ (بدون padding)

خلاصه نویسی:

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

padding: padding-top&bottom    padding-left&right ;

شما می توانید با گذاشتن فقط یک گزینه در padding کلی تمام padding ها را به همان اندازه در آورید. برای مثال اگر padding:15px باشد تمام چهار padding به اندازه 15 پیکسل از همه طرف فاضله خواهند داشت. به این صورت:

padding: padding-top&bottom&left&right ;

توجه کنید که padding یک لایه مانند width و margin می باشد و با آنها تداخلی ندارد. برای مثال اگر شما چنین استایلی را برای یک باکس داشته باشید... :

width:100px;
margin:10px;
padding:5px;

... یک باکس با 115 پیکسل خواهید داشت نه یک باکس با 110 پیکسل!

نا مطلع ها فکر می کنند که padding پنج پیکسل از Width کم می کند و جای اون 5 پیکسل می نشیند ، در حالی که 5 پیکسل به آن اضافه می کند (بهتر گفته بشه یک لایه 5 پیکسلی به عرض و ارتفاع اضافه می کند).