12. تعمق في نموذج الصندوق: الحشوة (Padding)

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

تعيين الحشوة

يمكن تعيين الحشوة لجميع الجوانب الأربعة في وقت واحد أو بشكل فردي.

1. الخصائص الفردية

css .box { /* يحدد الحشوة العلوية فقط / padding-top: 20px; / يحدد الحشوة اليمنى فقط / padding-right: 15px; / يحدد الحشوة السفلية فقط / padding-bottom: 20px; / يحدد الحشوة اليسرى فقط */ padding-left: 15px;

background-color: lightgray; /* الحشوة شفافة، لكن تظهر الخلفية من خلالها */ }

2. صيغة الاختصار (Shorthand)

تسمح لك صيغة الاختصار بتعريف جوانب متعددة في خاصية واحدة. الترتيب يتبع اتجاه عقارب الساعة: أعلى، يمين، أسفل، يسار (TRBL).

css /* 4 قيم: أعلى 10px، يمين 20px، أسفل 15px، يسار 5px */ .box-4 { padding: 10px 20px 15px 5px; }

/* قيمتان: أعلى/أسفل 10px، يمين/يسار 20px */ .box-2 { padding: 10px 20px; }

/* قيمة واحدة: جميع الجوانب الأربعة 15px */ .box-1 { padding: 15px; }

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

من المهم أن نعرف أن الحشوة تأخذ دائماً لون خلفية العنصر. إذا قمت بتعيين background-color: blue ، فستكون منطقة الحشوة زرقاء أيضاً، مما يحتوي المحتوى بصرياً.