كيفية استخدام العنصر Padding في CSS
التعريف : خاصية Padding في CSS
تسمح لك خاصية padding في CSS بتحديد فجوات الحشو المختلفة على الجوانب الأربعة لمحتوى العنصر ، ويتمثل ذلك في ترك مساحة بين المحتوى والحدود .
المساحة المتروكة للعنصر هي المسافة بين محتواه وحدوده. خاصية الحشو هي خاصية مختصرة لـ:
وتكتب على هذا الشكل:
|
1 2 3 |
p { padding: 10px 30px 20px 50px; } |
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
- padding:10px 5px 15px 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:10px
كيف تظهر فقرة داخل إطار بدون تسليط خاصية padding عليها:
هذه الفقرة تمت كتابتها داخل إطار، لكن دون تسليط خاصية padding (CSS) عليها، مما جعلها تظهر غير مقبولة لعدم وجود فجوة بين الكتابة و الاطار .. لكن إضافة خاصية padding سيجعلها منظمة ومقبولة بحيث ستتولد مساحة فارغة بين الكتابة وبين الاطار، وهذا ما سأعمل على شرحه خلال هذه المقالة إن شاء الله .. تابع معـي …
تطبيقات على استخدامات العنصر
الآن نذهب إلى التطبيق بالأمثلة:
≡ إذا كانت لنا فقرة داخل إطار ، ونريد أن نجعل الكتابة لها نفس الأبعاد من الحدود على سبيل المثل، 40px هي الفجوة بين الكتابة والحدود من اليمين واليسار والأعلى والأسفل فإننا نكتبها هكذا:
|
1 2 3 |
p { padding: 40px; } |
والنتيجة تكون هكذا:
هنا يتم كتابة فقرة لها نفس مساحة الفجوة مع الحدود وهي 40px : يمين، يسار، أعلى ، أسفل. ولك أن تغير قيمة padding حسب ما تراه مناسباً لك… ونكتب هنا كلام كثير حتى يتبين لنا أن الفقرة توجد في الوسط ، يعني انفها محفوفة بنفس المسافة من كل جانب .
CSS
≡ إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 30 بكسل للأعلى والأسفل وعلى 50 بكسل لليمين واليسار فإننا نكتبها هكذا:
|
1 2 3 |
p { padding: 30px 50px; } |
والنتيجة تكون هكذا:
هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي: 30px للأعلى والأسفل و 50px لليمين واليسار . يمكنك تغيير قيمة padding حسب ما تراه مناسباً لك.
CSS
≡ إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 20 بكسل للأعلى و 50 بكسل لليمين واليسار و 40 بكسل للأسفل: فإننا نكتبها هكذا:
|
1 2 3 |
p { padding: 20px 50px 40px; } |
والنتيجة تكون هكذا:
هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي: 20px للأعلى و 50 بكسل لليمين واليسار و 40 بكسل للأسفل. يمكنك تغيير قيمة padding حسب ما تراه مناسباً لك.
CSS
≡ إذا كانت لنا فقرة داخل إطار ، ونريد أن نضبط المساحة المتروكة للفقرة على 25 بكسل للأعلى و 60 بكسل لليمين و 40 بكسل للأسفل ، و 80 بكسل لليسار، فإننا نكتبها هكذا:
|
1 2 3 |
p { padding: 25px 60px 40px 80px; } |
والنتيجة تكون هكذا:
هنا يتم كتابة فقرة، مساحة فجوتها مع الحدود كالتالي: 25 بكسل للأعلى و 60 بكسل لليمين و 40 بكسل للأسفل. و 80 بكسل لليسار. يمكنك تغيير قيمة padding حسب ما تراه مناسباً لك.
CSS
أمثلة لخاصية padding
خاصية padding-top في CSS
تحديد مساحة الفجوة العلوية لعنصر <p> بقيمة 25 بكسل:
|
1 2 3 |
p { padding-top: 25px; } |
تحديد مساحة الفجوة المتروكة العلوية لعنصر <p> بقيمة 10٪ :
|
1 2 3 |
p { padding-top: 10%; } |
تحديد مساحة الفجوة المتروكة العلوية لعنصر <p> بقيمة 2em:
|
1 2 3 |
p { padding-top: 2em; } |
CSS
خاصية padding-right في CSS
تحديد مساحة الفجوة المتروكة لعنصر <p> بقيمة 150 بكسل:
|
1 2 3 |
p { padding-right: 150px; } |
تحديد مساحة الفجوة المتروكة اليمنى لعنصر <p> بقيمة 50٪ من عرض عنصر المحتوي:
|
1 2 3 |
p { padding-right: 50%; } |
تحديد مساحة الفجوة المتروكة اليمنى لعنصر <p> بقيمة 2em:
|
1 2 3 |
p { padding-right: 2em; } |
CSS
خاصية padding-bottom في CSS
تحديد مساحة الفجوة المتروكة السفلية لعنصر <p> بقيمة 25 بكسل:
|
1 2 3 |
p { padding-bottom: 25px; } |
عيّن المساحة المتروكة السفلية لعنصر <p> على 10٪ من عرض العنصر المحتوي:
|
1 2 3 |
p { padding-bottom: 10%; } |
تحديد مساحة المتروكة السفلية لعنصر <p> على 2em:
|
1 2 3 |
p { padding-bottom: 2em; } |
CSS
خاصية padding-left في CSS
اضبط المساحة المتروكة اليسرى لعنصر <p> على 50 بكسل:
|
1 2 3 |
p { padding-left: 50px; } |
عيّن المساحة المتروكة اليسرى لعنصر <p> على 10٪ من عرض العنصر المحتوي:
|
1 2 3 |
p { padding-left: 10%; } |
اضبط المساحة المتروكة اليسرى لعنصر <p> على 2 م:
|
1 2 3 |
p { padding-left: 2em; } |
CSS
أدعوكم للقيام باختبار كل الأمثلة ، وأعيدوا لي ارتساماتكم عبر التعليقات ، مع أجمل المتمنيات لكم بالتوفيق والاستفادة
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.