نظرة عامة موجزة عن CSS Padding

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

خاصية padding CSS

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

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

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

الحشو: 12 بكسل

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

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

المساحة المتروكة: 24 بكسل 48 بكسل

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

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

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

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

قيم CSS للملء

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

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

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

آثار إضافة CSS الحشو

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

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

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