جلسه ۰۸ : فضای خالی داخل عناصر ( padding ) در CSS

• جزئیات
• نوع مطلبآموزشی تصویری

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش مدیریت فضای خالی داخل عناصر html در css ، بپردازیم. در css ویژگی padding ، این امکان را فراهم می کند که فضای خالی داخلی عناصر html را مدیریت کنید. با این ویژگی می توانید تعیین کنید که محتوای داخل یک عنصر html از ۴ جهت اصلی (بالا،راست،پایین و چپ) چقدر فضای خالی داشته باشد.

در پست های آموزشی قبل ما مدیریت فضای فاصله خارجی عناصر html را ارائه کردیم، شما می توانید با مراجعه به پست آموزشی کار با فضای بین عناصر html در css مراجعه کنید.

همچنین برای زیباتر شدن و جذاب شدن قالب وب سایت خود می توانید به پست های آموزشی کار با ویژگی های border در css و  آموزش تنظیمات تصویر پس زمینه در css مراجعه کنید.

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

Padding- فضای خالی داخل عناصر html

مدیریت فضای خالی داخل عناصر html در css

ویژگی padding در css، برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز تعریف شده برای آن عنصر استفاده می شود. با این ویژگی امکان تعریف فضای خالی برای چهار جهت اصلی عناصر html یعنی بالا ، راست ، پایین و چپ (top, right, bottom, left) وجود دارد.

نمونه ای از مشخص کردن padding عناصر html :

تعریف فضای خالی برای یک جهت

شما با استفاده از ویژگی های padding که در اینجا مطرح شده است،می توانید فضاهای خالی مختلفی برای هر جهت تعریف کنید که باهم یکسان نباشند:

• padding-top
• padding-right
• padding-bottom
• padding-left

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

• length : در این حالت باید اندازه فضای حاشیه برحسب واحد های px, pt, cm, etc تعیین کنید.
• % : در این حالت باید اندازه فضای حاشیه برحسب درصد تعیین کنید.
• inherit : در این حالت اندازه فضا ، از عنصر والد یا بالاتر دریافت می شود.

در مثال زیر اندازه padding برای جهات مختلف ارائه شده است:

کوتاه کردن کدها

برای کوتاه تر کردن کدها شما می توانید اندازه فضای داخلی عناصر را برای هر ۴ جهتی که در مثال قبلی ذکر شده، در یک خط بصورت مختصر قرار دهید، فقط باید ترتیب ۴ جهت اصلی را در css بدانید، که ترتیب آن به این صورت است:

• padding-top
• padding-right
• padding-bottom
• padding-left

مثلا تفسیر کد کوتاه شده padding: 25px 50px 75px 100px به صورت زیر است:

• Top: فضای حاشیه بالا ۲۵px است.
• Right : فضای حاشیه راست ۵۰px است.
• Bottom: فضای حاشیه پایین ۷۵px است.
• Left: فضای حاشیه چپ ۱۰۰px است.

مثال کد بالا در css:

همچنین می توانید مقادیر مثال فوق را به سه ، دو و یک مقدار کاهش دهید. در این صورت اندازه ها فقط برای همان جهت ها اعمال می شود.

اگر در ویژگی padding یک عنصر ، سه مقدار را تعیین کنید، ترتیب اعمال آن ها به صورت زیر خواهد بود:

• padding: 25px 50px 75px
  • padding بالایی ۲۵px خواهد بود.
  • padding راست و چپ ۵۰px خواهد بود.
  • padding پایینی ۷۵px خواهد بود.

اگر در ویژگی padding یک عنصر ، دو مقدار را تعیین کنید، ترتیب اعمال آن ها به صورت زیر خواهد بود:

• padding: 25px 50px
  • padding های بالا و پایین ۲۵px است.
  • padding های چپ و راست ۵۰px است.

اگر در ویژگی padding یک عنصر ، یک را تعیین کنید، ترتیب اعمال آن ها به صورت زیر خواهد بود:

• padding: 25px
  • هر چهار padding عنصر ۲۵px خواهد بود.

padding و عرض عناصر

خصوصیات width (عرض) در  CSS عرض محدوده محتوای عنصر را مشخص می کند. محدوده محتوا بخشی از padding, border و margin است.

در مثال زیر عرض (width ) عنصر <div> را ۳۰۰px تعیین کرده ایم، اما مقدار واقعی width (عرض) ۳۵۰px خواهد بود (زیرا (padding راست) ۳۰۰px + 25px و (padding چپ) ۳۰۰px + 25px ) :

برای اینکه در مثال فوق اندازه ی width همان ۳۰۰px باقی بماند نیازی به حذف padding نیست.

کافیست ویژگی box-sizing را با border-box مقدار دهی کنید:

تمام خصوصیات padding در CSS

کلام آخر

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