خاصية Padding في CSS

كيفية استخدام العنصر  Padding في CSS

التعريف  : خاصية Padding في CSS

تسمح لك خاصية padding في CSS بتحديد فجوات الحشو المختلفة على الجوانب الأربعة لمحتوى العنصر ، ويتمثل ذلك في ترك مساحة بين المحتوى والحدود .

 المساحة المتروكة للعنصر هي المسافة بين محتواه وحدوده. خاصية الحشو هي خاصية مختصرة لـ:

وتكتب على هذا الشكل:

 

CSS

يتم تعيين قيم مساحة الفجوة المتروكة باستخدام الأطوال ( px أو em مثلاً )  أو النسب المئوية (%)، ولا يمكن قبول القيم السالبة. علماً أن القيمة الأولية أو الافتراضية لجميع خصائص المساحة المتروكة هي 0.

ملاحظة:  يؤدي الحشو إلى إنشاء مساحة إضافية داخل العنصر ، بينما ينشئ الهامش مساحة إضافية حول العنصر. يمكن أن تحتوي هذه الخاصية على من واحد إلى أربع قيم.

قراءة قيم padding

 

إذا كانت خاصية المساحة المتروكة تحتوي على أربع قِيَم:

    • padding:10px 5px 15px 20px 
      • top padding is 10px
      • right padding is 5px
      • bottom padding is 15px
      • left padding is 20px

top = الأعلى ↔  right = اليمين ↔  bottom = الأسفل  ↔ left = اليسار

إذا كانت خاصية المساحة المتروكة تحتوي على ثلاث قيم:

  • padding:10px 5px 15px
    • top padding is 10px
    • right and left padding are 5px
    • bottom padding is 15px

إذا كانت خاصية المساحة المتروكة تحتوي على قيمتين:

  • padding:10px 5px
    • top and bottom padding are 10px
    • right and left padding are 5px

إذا كانت خاصية المساحة المتروكة لها قيمة واحدة:

    • padding:10px
      • all four paddings are 10px

كيف تظهر فقرة داخل إطار بدون تسليط  خاصية padding  عليها:

هذه الفقرة تمت كتابتها داخل إطار، لكن دون تسليط خاصية padding (CSS) عليها، مما جعلها تظهر غير مقبولة لعدم وجود فجوة بين الكتابة و الاطار .. لكن إضافة خاصية padding سيجعلها  منظمة ومقبولة بحيث ستتولد مساحة فارغة بين الكتابة وبين الاطار، وهذا ما سأعمل على شرحه خلال هذه المقالة إن شاء الله .. تابع معـي …

تطبيقات على استخدامات العنصر

 

الآن نذهب إلى التطبيق بالأمثلة:

إذا كانت لنا فقرة داخل إطار ، ونريد أن نجعل الكتابة لها نفس الأبعاد من الحدود على سبيل المثل، 40px  هي الفجوة بين الكتابة والحدود من اليمين واليسار والأعلى والأسفل فإننا نكتبها هكذا:

 

والنتيجة تكون هكذا:

هنا يتم كتابة فقرة لها نفس مساحة الفجوة مع الحدود وهي 40px : يمين، يسار، أعلى ، أسفل. ولك أن تغير قيمة padding  حسب ما تراه مناسباً لك…  ونكتب هنا كلام كثير حتى يتبين لنا أن الفقرة توجد  في الوسط ، يعني انفها محفوفة بنفس المسافة من كل جانب .

CSS

إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 30 بكسل للأعلى والأسفل وعلى 50 بكسل لليمين واليسار فإننا نكتبها هكذا:

 

والنتيجة تكون هكذا:

هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي:  30px للأعلى والأسفل و 50px لليمين واليسار . يمكنك تغيير قيمة padding  حسب ما تراه مناسباً لك.

CSS

إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 20 بكسل للأعلى و 50 بكسل لليمين واليسار و 40 بكسل للأسفل: فإننا نكتبها هكذا:

والنتيجة تكون هكذا:

هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي:  20px للأعلى و 50 بكسل لليمين واليسار و 40 بكسل للأسفل. يمكنك تغيير قيمة padding  حسب ما تراه مناسباً لك.

 

CSS

إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 25 بكسل للأعلى و 60 بكسل لليمين و 40 بكسل للأسفل ، و 80 بكسل لليسار، فإننا نكتبها هكذا:

والنتيجة تكون هكذا:

هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي:  25 بكسل للأعلى و 60 بكسل لليمين و 40 بكسل للأسفل. و 80 بكسل لليسار. يمكنك تغيير قيمة padding  حسب ما تراه مناسباً لك.

CSS

خاصية Padding في CSS

أمثلة لخاصية padding

خاصية padding-top في CSS

 

تحديد مساحة الفجوة العلوية لعنصر <p> بقيمة 25 بكسل:

تحديد مساحة الفجوة المتروكة العلوية لعنصر <p> بقيمة 10٪ :

تحديد مساحة الفجوة المتروكة العلوية لعنصر <p> بقيمة 2em:

CSS

خاصية padding-right في CSS

 

تحديد مساحة الفجوة المتروكة لعنصر <p> بقيمة 150 بكسل:

تحديد مساحة الفجوة المتروكة اليمنى لعنصر <p> بقيمة 50٪ من عرض عنصر المحتوي:

تحديد مساحة الفجوة المتروكة اليمنى لعنصر <p> بقيمة 2em:

CSS

خاصية padding-bottom في CSS

تحديد مساحة الفجوة المتروكة السفلية لعنصر <p> بقيمة 25 بكسل:

عيّن المساحة المتروكة السفلية لعنصر <p> على 10٪ من عرض العنصر المحتوي:

تحديد مساحة المتروكة السفلية لعنصر <p> على 2em:

CSS

خاصية padding-left في CSS

 

اضبط المساحة المتروكة اليسرى لعنصر <p> على 50 بكسل:

عيّن المساحة المتروكة اليسرى لعنصر <p> على 10٪ من عرض العنصر المحتوي:

اضبط المساحة المتروكة اليسرى لعنصر <p> على 2 م:

CSS

أدعوكم للقيام باختبار كل الأمثلة ، وأعيدوا لي ارتساماتكم عبر التعليقات ، مع أجمل المتمنيات لكم بالتوفيق والاستفادة

في أمان الله


 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

 

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

134 عدد المشاهدات لهذا المحتوى
Scroll to Top