امروز : چهارشنبه ، ۱ آذر ۱۳۹۶
خانه / آموزش کامل CSS / آموزش کامل CSS – قسمت نهم: فاصله های داخلی
آموزش سی اس اس

آموزش کامل CSS – قسمت نهم: فاصله های داخلی

در قسمت قبلی با فاصله بین دو المان در css آشنا شدیم که به آن margin گفته می شد. در این جلسه در مورد فاصله های داخلی المان ها صحبت خواهیم کرد که به آن padding گفته می شود.

خاصیت padding در css

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

این فاصله می تواند از هر ۴ جهت راست، چپ، بالا و پایین اعمال شود. در مقابل padding فاصله مورد نظر را برحسب پیکسل می نویسیم. نمونه نوشتن پدینگ به این صورت می باشد ;padding:10px

در نوشتن padding چند حالت پیش می آید:

حالت اول:

در واقع همان حالتی است که در نمونه فوق نوشتیم. در این حالت فاصله به اندازه مساوی از هر ۴ جهت اعمال می شود. مثلا فاصله از داخل المان از هر ۴ جهت ۱۰ پیکسل است. در مثال زیر ما به المان box که دور تا دور پاراگراف قرار گرفته فاصله ۱۰ پیکسلی داده ایم.

حالت دوم:

اگر بخواهیم فاصله ها از هر طرف عدد متفاوتی باشد از این روش می توانیم استفاده کنیم به مثال زیر توجه کنید که در آن فاصله از هر طرف را جداگانه تعریف کرده ایم.

لازم به ذکر است که شما می توانید تنها در یک جهت فاصله بدهید و لازم نیست که تمامی فاصله ها را ذکر کنید. می توانید فاصله را فقط در جهتی که می خواهید بنویسید.

حالت سوم:

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

در این حالت اگر هر کدام از اعداد را ننویسید صفر در نظر گرفته می شود.

درباره ما admin

محمد صفری : مدیر پردیس وردپرس ، مهندس نرم افزار و طراح سایت

این موارد رو هم بررسی کنید

آموزش سی اس اس

آموزش کامل CSS – قسمت ۱۲: موقعیت المان ها ۲

همان طوری در جلسه قبل آموزش گفتیم position چهار حالت دارد که با دو حالت …

پاسخ دهید