مفهوم الهامش الداخلي
الهامش الداخلي ( Padding ) هو المسافة الفارغة التي يمكن وضعها بين محتوى العنصر و حدوده.
حجم الهامش الداخلي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.
الهامش الداخلي ( Padding ) هو المسافة الفارغة التي يمكن وضعها بين محتوى العنصر و حدوده.
حجم الهامش الداخلي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.
الخصائص التالية تستخدم لتحديد حجم الهامش الداخلي من جهة محددة:
padding-top
لتحديد حجم الهامش الداخلي للعنصر من الأعلى.padding-bottom
لتحديد حجم الهامش الداخلي للعنصر من الأسفل.padding-right
لتحديد حجم الهامش الداخلي للعنصر من الجهة اليمنى.padding-left
لتحديد حجم الهامش الداخلي للعنصر من الجهة اليسرى.فيما يلي القيم التي يمكن وضعها كحجم للهامش الداخلي:
inherit
لجعل العنصر يرث نسبة الهامش الداخلي من العنصر الموجود فيه.length
نقصد بها وضع رقم بوحدة قياس محددة مثل px
، pt
، cm
، %
ليمثل حجم الهامش الداخلي.نود الإشارة إلى أن قيمة الهامش الداخلي لا يمكن أن تكون بالسالب، فمثلاً ممنوع أن تكون -5px
أو -20%
لأن هذه القيم أصغر من صفر.
في حال وضعت قيمة الهامش الداخلي بالسالب فإن المتصفح سيرفض القيمة، أي سيعتبرها Invalid property value.
لملاحظة تأثير الهامش الداخلي الذي أضفته العنصر، بمعنى لملاحظة كم تم إبعاد محتوى العنصر عن حدوده ( Border ) يمكنك إظهار الحدود.
في المثال التالي قمنا بإضافة حدود و هامش داخلي للعنصر الذي يملك الكلاس demo
.
.demo { padding-top: 20px; padding-bottom: 20px; padding-right: 15px; padding-left: 15px; border: 1px solid gray; }تجربة الكود
بواسطة الخاصة padding
يمكنك تحديد حجم الهامش الداخلي من كل الجوانب. و هنا نود الإشارة إلى أنه على حسب عدد القيم التي تمررها لهذه الخاصية فإنه سيتم تحديد أي جهة سيتم إضافة الهامش فيها و هذا الأمر ستراه بدقة في الأمثلة التالية.
في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.
إذا قمت بتمرير قيمتين للخاصية padding
سيحدث التالي:
إذا قمت بتمرير ثلاث قيم للخاصية padding
سيحدث التالي:
إذا قمت بتمرير أربع قيم للخاصية padding
سيحدث التالي:
إذا أردت إزالة الهامش للعنصر من جهة محددة، يمكنك وضع قيمة الهامش الخاصة به تساوي 0
.
في المثال التالي قمنا بإزالة الهامش الداخلي من كل الجهات.
في المثال التالي قمنا بإضافة هامش داخلي في أعلى و أسفل العنصر بمقدار 20 بيكسل و قمنا بإزالة أي هامش من الجانبين الأيمن و الأيسر.
إذا جعلت قيمة الهامش الداخلي تساوي 0
أو 0%
أو 0px
إلخ.. فكلها تعني صفر و هنا يفهم المتصفح أنك لا تريد عرض أي هامش.