CSS - Padding الحشوات الداخلية
CSS - الحشوة (Padding)
🔸 خاصية padding تُستخدم لتحديد المسافة الفارغة بين محتوى العنصر وحدوده (border)، أي أنها تُضيف فراغًا داخليًا داخل العنصر.
✅ استخدام خصائص الحشوة
يمكن تعيين حشوة على كل جانب من جوانب العنصر بشكل مستقل:
padding-top– الحشوة من الأعلىpadding-right– الحشوة من اليمينpadding-bottom– الحشوة من الأسفلpadding-left– الحشوة من اليسار
div {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
}
🧪 استخدام الشكل المختصر
يمكنك استخدام خاصية padding لتحديد جميع القيم في سطر واحد:
div {
padding: 20px 30px 20px 30px; /* top right bottom left */
}
أو باستخدام صيغ أخرى:
padding: 25px;➜ تطبق على جميع الجهاتpadding: 10px 20px;➜ أعلى وأسفل | يمين ويسارpadding: 10px 15px 20px;➜ أعلى | يمين ويسار | أسفل
📏 تأثير الحشوة على الحجم
افتراضيًا، عند تعيين الحشوة، يتم إضافتها إلى الأبعاد الكلية للعنصر (إذا لم يتم تعيين box-sizing: border-box).
div {
width: 300px;
padding: 20px;
}
في هذا المثال، العرض النهائي سيكون 300px (عرض المحتوى) + 40px (padding يمين ويسار) = 340px.
🧪 مثال عملي داخل HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div>هذا نص داخل عنصر يحتوي على حشوة داخلية.</div>
</body>
</html>
💡 ملاحظات مهمة
- تُستخدم
paddingلإنشاء فراغ مريح بين المحتوى وحدود العنصر. - يمكن استخدام القيم بوحدات مثل
px،em، أو%. - استخدم
box-sizing: border-box;لتضمين الحشوة ضمن الأبعاد الكلية للعنصر.
تعليقات
إرسال تعليق