حشوة CSS

كيفية استخدام الحشو في CSS

الpaddingتُستخدم خاصية CSS بشكل شائع في CSS لإضافة مساحة في الجانب الداخلي للعنصر.

يتذكر:

  • marginتضيف مساحة خارج حدود العنصر
  • paddingيضيف مساحة داخل حد عنصر

خصائص الحشو المحددة

paddingله 4 خصائص ذات صلة تعمل على تغيير حشوة حافة واحدة في وقت واحد:

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

استخدام هؤلاء بسيط للغاية ولا يمكن الخلط معه ، على سبيل المثال:

padding-left: 30px;
padding-right: 3em;

باستخدامpaddingالاختزال

paddingهو اختصار لتحديد قيم حشو متعددة في نفس الوقت ، اعتمادًا على عدد القيم التي تم إدخالها ، يتصرف بشكل مختلف

1 قيمة

استخدام قيمة واحدة ينطبق ذلك علىالكلالحشوات: أعلى ، يمين ، أسفل ، يسار.

padding: 20px;

2 القيم

استخدام قيمتين يطبق الأول علىقمة القاع، والثاني ليسار يمين.

padding: 20px 10px;

3 قيم

باستخدام 3 قيم يتم تطبيق الأول علىأعلى، والثاني ليسار يمينوالثالث لقاع.

padding: 20px 10px 30px;

4 قيم

باستخدام 4 قيم يتم تطبيق الأول علىأعلى، والثاني لحقوالثالث لقاع، الرابع لاليسار.

padding: 20px 10px 5px 0px;

لذلك ، الترتيبأعلى اليمين ، أسفل اليسار.

تم قبول القيم

paddingيقبل القيم المعبر عنها بأي نوع من وحدات الطول ، وأكثرها شيوعًا هي px ، em ، rem ، لكنيوجد العديد من الآخرين.

تحميل مجانيكتيب CSS


المزيد من دروس css: