سی ایس ای اندرون میراگ

فضای داخلی این عنصر 70px است.

سی ایس ای اندرون میراگ

CSS padding ویژگی برای ایجاد فضایی در اطراف محتوای عنصر در هر محدوده تعریف شده استفاده می‌شود.

با استفاده از CSS، شما می‌توانید فضای داخلی (پرکننده) را به طور کامل کنترل کنید. برخی از ویژگی‌ها می‌توانند فضای داخلی هر سمت (بالای، سمت راست، پایین و سمت چپ) را تنظیم کنند.

Padding - برای سمت‌های جداگانه

CSS دارای ویژگی‌هایی برای تنظیم فضای داخلی هر سمت عنصر است:

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

تمام ویژگی‌های فضای داخلی می‌توانند مقادیر زیر را تنظیم کنند:

  • length - برای مشخص کردن فضای داخلی با واحد‌های px، pt، cm و غیره
  • % - برای مشخص کردن فضای داخلی به عنوان درصد از عرض عنصر شامل
  • inherit - برای مشخص کردن اینکه فضای داخلی باید از عنصر والد ارث ببرد

توجه:ممنوع است که از مقادیر منفی استفاده شود.

उदाहरण

برای تنظیم فضای داخلی چهار سمت <div> به صورت متفاوت:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

स्वयं एक प्रयोग कीजिए

Padding - ویژگی کوتاه‌نویسی

کد کوچک کردن کری، می‌توان تمام ویژگی‌های فضای داخلی در یک ویژگی مشخص کرد.

padding गुण निम्नलिखित अंदर सीमा-भार गुणों का लघुतरी गुण है:

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

काम काज यही है:

यदि padding गुण को चार मान सेट किया गया है:

  • padding: 25px 50px 75px 100px;
    • ऊपर अंदर सीमा-भार 25px है
    • दायाँ अंदर सीमा-भार 50px है
    • नीचे अंदर सीमा-भार 75px है
    • बाईं अंदर सीमा-भार 100px है

उदाहरण

चार मान सेट करने वाले padding लघुतरी गुण का उपयोग करके:

div {
  padding: 25px 50px 75px 100px;
}

स्वयं एक प्रयोग कीजिए

यदि padding गुण को तीन मान सेट किया गया है:

  • padding: 25px 50px 75px;
    • ऊपर अंदर सीमा-भार 25px है
    • दायाँ और बाईं अंदर सीमा-भार 50px हैं
    • नीचे अंदर सीमा-भार 75px है

उदाहरण

तीन मान सेट करने वाले padding लघुतरी गुण का उपयोग करके:

div {
  padding: 25px 50px 75px;
}

स्वयं एक प्रयोग कीजिए

यदि padding गुण को दो मान सेट किया गया है:

  • padding: 25px 50px;
    • ऊपर और नीचे अंदर सीमा-भार 25px हैं
    • दायाँ और बाईं अंदर सीमा-भार 50px हैं

उदाहरण

दो मान सेट करने वाले padding लघुतरी गुण का उपयोग करके:

div {
  padding: 25px 50px;
}

स्वयं एक प्रयोग कीजिए

यदि padding गुण को एक मान सेट किया गया है:

  • padding: 25px;
    • सभी चार अंदर सीमा-भार 25px हैं

उदाहरण

एक मान सेट करने वाले padding लघुतरी गुण का उपयोग करके:

div {
  padding: 25px;
}

स्वयं एक प्रयोग कीजिए

padding और एलिमेंट चौड़ाई

CSS width गुण एलिमेंट के सामग्री क्षेत्र की चौड़ाई निर्दिष्ट करता है। सामग्री क्षेत्र एलिमेंट (बॉक्स मॉडल) के अंदर सीमा-भार, बॉर्डर और माउंटिंग के भीतर का हिस्सा है。

इसलिए यदि एलिमेंट को निर्दिष्ट चौड़ाई दी गई है, तो इस एलिमेंट के अंदर सीमा-भार को एलिमेंट के कुल चौड़ाई में जोड़ा जाता है। यह अकसर नहीं चाहिए जाने वाला परिणाम है。

उदाहरण

यहाँ, <div> एलिमेंट की चौड़ाई 300px है। लेकिन <div> एलिमेंट की वास्तविक चौड़ाई 350px (300px + बाईं अंदर सीमा-भार 25px + दायाँ अंदर सीमा-भार 25px) होगी:

div {
  width: 300px;
  padding: 25px;
}

स्वयं एक प्रयोग कीजिए

अगर आपको विस्तार को 300px रखना होगा, न कि फ़िल्टर तथा फ़ोल्डर को देखे, तो आपको box-sizing गुण। इससे एलिमेंट की चौड़ाई बनी रहेगी। अगर आपको अंदर सीमा-भार बढ़ाना होगा, तो उपलब्ध सामग्री स्पेस कम होगी。

उदाहरण

box-sizing गुण का उपयोग करके विस्तार को 300px रखें, न कि फ़िल्टर तथा फ़ोल्डर को देखे:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

स्वयं एक प्रयोग कीजिए

और अधिक उदाहरण

बाईं अंदर सीमा-भार सेट करना
इस उदाहरण में देखा जाता है कि कैसे <p> एलिमेंट का बाईं अंदर सीमा-भार सेट किया जाता है。
दायाँ अंदर सीमा-भार सेट करना
इस उदाहरण में देखा जाता है कि कैसे <p> एलिमेंट का दायाँ अंदर सीमा-भार सेट किया जाता है。
ऊपर अंदर सीमा-भार सेट करना
इस उदाहरण में देखा जाता है कि कैसे <p> एलिमेंट का ऊपर अंदर सीमा-भार सेट किया जाता है。
नीचे अंदर सीमा-भार सेट करना
इस उदाहरण में देखा जाता है कि कैसे <p> एलिमेंट का नीचे अंदर सीमा-भार सेट किया जाता है。

सभी CSS अंदर सीमा-भार गुण

गुण वर्णन
padding एक वाक्य में सभी अंदर सीमा-भार गुणों को सेट करने के लिए लघुतरी गुण
padding-bottom सेट एलिमेंट का नीचे अंदर सीमा-भार。
padding-left सेट एलिमेंट का बाईं अंदर सीमा-भार。
padding-right تنظیم پدینگ سمت راست عنصر.
padding-top تنظیم پدینگ بالای عنصر.

خواندن بیشتر

کتاب درسی:مدل جعبه: پدینگ داخلی CSS