در قسمت قبلی با فاصله بین دو المان در css آشنا شدیم که به آن margin گفته می شد. در این جلسه در مورد فاصله های داخلی المان ها صحبت خواهیم کرد که به آن padding گفته می شود.
خاصیت padding در css
فرض کنید یک div رنگی دارید که نوشته ای در آن گذاشته اید. فاصله ای که بین نوشته و div قرار دارد همان padding یا فاصله از داخل می باشد. پدینگ در واقع فاصله بین border المان تا محتوای داخلی آن است که در قسمت هفتم آموزش به صورت تصویری آن را نشان دادیم.
این فاصله می تواند از هر 4 جهت راست، چپ، بالا و پایین اعمال شود. در مقابل padding فاصله مورد نظر را برحسب پیکسل می نویسیم. نمونه نوشتن پدینگ به این صورت می باشد ;padding:10px
در نوشتن padding چند حالت پیش می آید:
حالت اول:
در واقع همان حالتی است که در نمونه فوق نوشتیم. در این حالت فاصله به اندازه مساوی از هر 4 جهت اعمال می شود. مثلا فاصله از داخل المان از هر 4 جهت 10 پیکسل است. در مثال زیر ما به المان box که دور تا دور پاراگراف قرار گرفته فاصله 10 پیکسلی داده ایم.
// -- html code: --
<div class="box">
<p class=" element">متن</p>
</div>
// -- css code: --
p.element {
color: red;
}
div.box {
padding: 10px;
background-color: orange;
}
حالت دوم:
اگر بخواهیم فاصله ها از هر طرف عدد متفاوتی باشد از این روش می توانیم استفاده کنیم به مثال زیر توجه کنید که در آن فاصله از هر طرف را جداگانه تعریف کرده ایم.
p.element {
color: red;
}
div.box {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
background-color: orange;
}
لازم به ذکر است که شما می توانید تنها در یک جهت فاصله بدهید و لازم نیست که تمامی فاصله ها را ذکر کنید. می توانید فاصله را فقط در جهتی که می خواهید بنویسید.
حالت سوم:
شاید نوشتن هر 4 دستور برای برنامه های بزرگتر کاری خسته کننده باشد. بنابراین می توانید به صورت خلاصه تر هر 4 جهت فاصله را در یک خط بنویسید. در این حالت فاصله ها به ترتیب و از سمت چپ به راست بدین صورت می باشند: بالا ، راست ، پایین ، چپ.
p {
padding: 25px 50px 20px 50px;
}
در این حالت اگر هر کدام از اعداد را ننویسید صفر در نظر گرفته می شود.