CSS حشوة

CSS الحشو

خصائص CSS الحشو تحدد المساحة البيضاء بين محتوى العنصر والحدود العنصر.

الحشو يخلي منطقة حول المحتوى (داخل الحدود) عنصر.

	ملاحظة: يتأثر الحشو حسب لون خلفية عنصر!

مع CSS، لديك السيطرة الكاملة على الحشو. هناك خصائص CSS لوضع الحشو لكل جانب من عنصر (أعلى، يمين، أسفل، واليسار).

الحشو - الفردية الجانبين

CSS له خصائص لتحديد الحشو لكل جانب عنصر:

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

كافة الخصائص الحشو يمكن أن يكون القيم التالية:

• طول - يحدد الحشو في px, pt, cm ، الخ
• تحدد الحشو في المائة من عرض عنصر يحتوي على -٪
• وراثة - تنص على أن الحشو يجب أن تكون موروثة من العنصر الأصلي

يقوم المثال التالي الحشو مختلفة لجميع الجوانب الأربعة من <p> العنصر:

الحشو - الخاصية المختصرة

لتقصير رمز، فمن الممكن لتحديد كافة الخصائص الحشو في خاصية واحدة.

و padding الخاصية هي خاصية الاختزال للخصائص الحشو الفردية التالية:

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

لذلك، وهنا هو كيف يعمل:

إذا كان padding الخاصية لديه أربع قيم:

• الحشو: 25px 50px 75px 100px؛
  • كبار الحشو 25px
  • الحشو الصحيح هو 50px
  • الحشو القول 75px
  • الحشو الأيسر هو 100px

إذا كان padding الملكية لها ثلاث قيم:

• الحشو: 25px 50px 75px؛
  • كبار الحشو 25px
  • سائد اليمين واليسار هي 50px
  • الحشو القول 75px

إذا كان padding الملكية لها قيمتين:

• الحشو: 25px 50px؛
  • سائد العلوية والسفلية هي 25px
  • سائد اليمين واليسار هي 50px

إذا كان padding الملكية لها قيمة واحدة:

• الحشو: 25px؛
  • جميع سائد الأربعة هي 25px

المزيد من الأمثلة

كافة الخصائص الحشو في إعلان واحد
يوضح هذا المثال خاصية الاختزال لوضع كافة الخصائص الحشو في إعلان واحد، يمكن أن يكون من أربعة القيم.

تعيين الحشو اليسار
يوضح هذا المثال كيفية إعداد الحشو الأيسر من <p> العنصر.

تعيين الحشو الصحيح
يوضح هذا المثال كيفية إعداد الحشو الأيمن من <p> العنصر.

تعيين الحشو كبار
يوضح هذا المثال كيفية إعداد الحشو العلوي من <p> العنصر.

تعيين الحشو السفلي
يوضح هذا المثال كيفية إعداد الحشو السفلي من <p> العنصر.

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 »

جميع خصائص CSS الحشو