فهم أساسيات حشو CSS

تُعد تعبئة CSS إحدى خصائص ملف نموذج مربع CSS. تحدد خاصية الاختزال هذه المساحة المتروكة حول الجوانب الأربعة لعنصر HTML. يمكن تطبيق حشوة CSS على كل ملفات علامة HTML (باستثناء بعض علامات الجدول). بالإضافة إلى ذلك ، يمكن أن يكون لجميع الجوانب الأربعة للعنصر قيمة مختلفة.

خاصية الحشو في CSS

لاستخدام خاصية CSS padding المختصرة ، يمكنك استخدام "TRouBLe" ذاكري (أو "TRiBbLe" لمحبي Star Trek). هذا يعني أعلى, حق, الأسفل، و غادر، ويشير إلى ترتيب عروض الحشو التي تحددها في خاصية الاختزال. على سبيل المثال:

الحشو: أعلى اليمين أسفل اليسار ؛
الحشو: 1 بكسل 2 بكسل 3 بكسل 6 بكسل ؛ 

إذا استخدمت القيم المذكورة أعلاه ، فسيتم تطبيق قيمة مساحة مختلفة على كل جانب من عنصر HTML الذي تقوم بتطبيقه عليه. إذا كنت تريد تطبيق نفس المساحة المتروكة على الجوانب الأربعة ، فيمكنك تبسيط CSS واكتب فقط قيمة واحدة:

الحشو: 12 بكسل ؛

باستخدام هذا السطر من CSS ، سيتم تطبيق 12 بكسل من الحشو على الجوانب الأربعة للعنصر.

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

الحشو: 24 بكسل 48 بكسل ؛

سيتم تطبيق القيمة الأولى (24 بكسل) على الجزء العلوي والسفلي ، بينما تنطبق القيمة الثانية على اليسار واليمين.

إذا كتبت ثلاث قيم ، فسيؤدي ذلك إلى جعل المساحة المتروكة الأفقية (يسارًا ويمينًا) كما هي ، مع تغيير الجزء العلوي والسفلي:

الحشو: أعلى اليمين واليسار السفلي ؛
الحشو: 0 بكسل 1 بكسل 3 بكسل ؛

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

قيم حشو CSS

يمكن أن تأخذ تعبئة CSS أي قيمة طول غير سالبة. تأكد من تحديد القياس ، مثل px أو em. يمكنك أيضًا تحديد نسبة المساحة المتروكة ، والتي ستكون نسبة مئوية من عرض الكتلة التي تحتوي على العنصر. يتضمن هذا المساحة المتروكة العلوية والسفلية. على سبيل المثال:

#container {width: 800px؛ الارتفاع: 200 بكسل ؛ }
#container p {width: 400px؛ الارتفاع: 75٪؛ الحشو: 25٪ 0 ؛ }

ال ارتفاع من الفقرة داخل #وعاء سيكون 75٪ من عنصر #وعاءارتفاع زائد 25٪ من عرض المساحة المتروكة العلوية و 25٪ من عرض الحشوة السفلية. هذا إجمالي 300 + 200 + 200 = 700 بكسل.

تأثيرات إضافة CSS Padding

على عناصر على مستوى الكتلةيتم وضع الحشوة على الجوانب الأربعة. نظرًا لأن العنصر عبارة عن كتلة أو صندوق بالفعل ، يتم تطبيق المساحة المتروكة على جوانب الصندوق.

عند إضافة حشوة CSS إلى عناصر مضمنة، قد يكون هناك بعض التداخل بين العناصر أعلى وأسفل العنصر المضمن إذا تجاوزت الحشوة الرأسية ارتفاع الخط ، ولكنها لن تدفع ارتفاع الخط لأسفل. ستتم إضافة حشوة CSS الأفقية المطبقة على العناصر المضمنة إلى بداية العنصر ونهاية العنصر. وقد يلتف الحشو على الخطوط. ولكن لن يتم تطبيقه على جميع سطور عنصر متعدد الأسطر ، لذلك لا يمكنك استخدام المساحة المتروكة لتأخير جزء من محتوى مضمّن متعدد الأسطر.

أيضًا ، في CSS2.1 ، لا يمكنك إنشاء كتل حاويات حيث يعتمد العرض على عنصر بنسب مئوية للعرض (أو عروض حشو). إذا قمت بذلك تكون النتيجة غير محددة. ستستمر المتصفحات في عرض المحتويات ، ولكن قد لا تحصل على النتائج التي تتوقعها. إذا فكرت في الأمر ، فمن المنطقي ، كما لو أن عنصر الحاوية يحتاج إلى معرفة عرض العناصر الفرعية الخاصة به من أجل تحديد عرضه - مثل عندما لا يكون لها عرض محدد مسبقًا ، ويتم تعيين عرض واحد أو أكثر كنسبة مئوية من عنصر الحاوية ، فإن هذا يُنشئ سلسلة دائرية بدون إجابه. إذا كنت تستخدم النسب المئوية لعرض أي شيء في المستند الخاص بك ، فيجب عليك التأكد من تحديد عرض العنصر الأصل أيضًا.