كيفية تنفيذ الحشو في CSS بالأمثلة



ستزودك هذه المقالة بمعرفة مفصلة وشاملة حول كيفية تنفيذ الحشو في CSS مع الأمثلة.

الحشو هو أحد أهم جوانب و . سنناقش في هذه المقالة أهمية واستخدام الحشو في CSS بالترتيب التالي:

ما هو الحشو في CSS؟

تتيح لك خاصية المساحة المتروكة تحديد مكان التحديد ومقدار المسافة التي يجب أن تظهر بين نص المحتوى للعنصر وحدوده. يجب أن تكون قيمة هذه السمة طولًا أو نسبة مئوية أو كلمة.





Padding-in-CSS



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

خصائص الحشو

يمكن استخدام الخصائص التالية لـ Padding في CSS للتحكم في القوائم. ومع ذلك ، يمكنك أيضًا تعيين قيم مختلفة للحشو على جانبي المربع باستخدام الخصائص التالية بشكل أساسي:

  • أسفل الحشو: تحدد المساحة المتروكة السفلية للعنصر.



  • أعلى الحشو: تحدد المساحة المتروكة العلوية للعنصر.

  • المساحة المتروكة: تحدد المساحة المتروكة اليسرى للعنصر.

  • ترك مساحة لليمين: تحدد المساحة المتروكة الصحيحة للعنصر.

  • حشوة: هذا بمثابة اختصار لمزيد من الخصائص.

خاصية Padding-bottom:

يتم تعيين هذا على المساحة المتروكة السفلية للعنصر. يمكن أن تأخذ القيم في طول النسبة المئوية.


هذه هي المساحة المتروكة السفلية المحددة للفقرة



هذه فقرة أخرى محددة المساحة المتروكة في النسبة المئوية

انتاج:

خاصية Padding-top

ستحدد خاصية padding-top هذه المساحة المتروكة العلوية للعنصر. يمكن أن يأخذ هذا قيمًا بطول النسبة المئوية.


هذه هي الفقرة العلوية المتروكة المحددة



هذه فقرة أخرى محددة المساحة المتروكة بالنسبة المئوية

انتاج:

خاصية ترك الحشوة

ستعمل خاصية padding-left هذه على تعيين المساحة المتروكة اليسرى للعنصر. يمكن أن تأخذ قيمًا بطول النسبة المئوية.


هذه هي الفقرة المحددة المساحة المتروكة اليسرى



هذه فقرة أخرى محددة المساحة المتروكة لليسار بالنسبة المئوية

انتاج:

خاصية حق الحشو

ستحدد خاصية padding-right هذه المساحة المتروكة الصحيحة للعنصر. يمكن أن تأخذ قيمًا بطول النسبة المئوية.


هذه هي الفقرة المحددة الحشو الأيمن



هذه فقرة أخرى محددة المساحة المتروكة بالنسبة المئوية

انتاج:

خدمة الآن تعليمي أداة التذاكر

خاصية الحشو

تعيّن خاصية المساحة المتروكة هذه المساحة المتروكة اليمنى واليسرى والعلوية والسفلية. يمكن أن يأخذ هذا القيم في طول النسبة المئوية.


كل هذه الحشوة الأربعة ستكون 20 بكسل



ستكون المساحة المتروكة العلوية والسفلية 20 بكسل ، وستكون مساحة الحشوة اليمنى واليسرى 10٪ من إجمالي عرض المستند



ستكون المساحة المتروكة العلوية والسفلية 20 بكسل ، وستكون المساحة المتروكة اليمنى 3٪ من إجمالي عرض المستند ، وستكون الحشوة السفلية والعلوية 20 بكسل

انتاج:

بهذا نصل إلى نهاية هذه المقالة الرائعة عن الحشو في CSS. آمل أن تكون قد فهمت الطرق المختلفة التي يمكننا من خلالها إضافة الحشو.

إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب ، فاطلع على بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

إذا كنت لا تزال مهتمًا. إذا كان لديك أي سؤال ، فيمكنك نشره في قسم التعليقات في مدونة 'Padding in CSS' ، وسنعاود الاتصال بك في أقرب وقت ممكن.