مفهوم الهامش الداخلي

الهامش الداخلي ( Padding ) هو المسافة الفارغة التي يمكن وضعها بين محتوى العنصر و حدوده.

حجم الهامش الداخلي للعنصر يمكنك تحديده من كل الجهات أو من جهات محددة.

إضافة هامش داخلي من جهة محددة

الخصائص التالية تستخدم لتحديد حجم الهامش الداخلي من جهة محددة:

• padding-top لتحديد حجم الهامش الداخلي للعنصر من الأعلى.
• padding-bottom لتحديد حجم الهامش الداخلي للعنصر من الأسفل.
• padding-right لتحديد حجم الهامش الداخلي للعنصر من الجهة اليمنى.
• padding-left لتحديد حجم الهامش الداخلي للعنصر من الجهة اليسرى.

فيما يلي القيم التي يمكن وضعها كحجم للهامش الداخلي:

• inherit لجعل العنصر يرث نسبة الهامش الداخلي من العنصر الموجود فيه.
• length نقصد بها وضع رقم بوحدة قياس محددة مثل px، pt، cm، % ليمثل حجم الهامش الداخلي.

رؤية تأثير الهامش الداخلي

لملاحظة تأثير الهامش الداخلي الذي أضفته العنصر، بمعنى لملاحظة كم تم إبعاد محتوى العنصر عن حدوده ( Border ) يمكنك إظهار الحدود.

في المثال التالي قمنا بإضافة حدود و هامش داخلي للعنصر الذي يملك الكلاس demo.

.demo {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 15px;
    padding-left: 15px;
    border: 1px solid gray;
}

تحديد الهامش الداخلي من كل الجهات بسطر واحد

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

في المثال التالي قمنا بإضافة هامش داخلي للعنصر بمقدار 30 بكسل من كل الجوانب.

div {
    padding: 30px;
}

إذا قمت بتمرير قيمتين للخاصية padding سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الداخلي جهتي الأعلى و الأسفل.
• القيمة الثانية ستمثل حجم الهامش الداخلي جهتي اليمين و اليسار.

div {
    padding: 20px 15px;
}

إذا قمت بتمرير ثلاث قيم للخاصية padding سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الداخلي في الأعلى.
• القيمة الثانية ستمثل حجم الهامش الداخلي جهتي اليمين و اليسار.
• القيمة الثالثة ستمثل حجم الهامش الداخلي في الأسفل.

div {
    padding: 20px 15px 10px;
}

إذا قمت بتمرير أربع قيم للخاصية padding سيحدث التالي:

• القيمة الأولى ستمثل حجم الهامش الداخلي في الأعلى.
• القيمة الثانية ستمثل حجم الهامش الداخلي جهة اليمين.
• القيمة الثالثة ستمثل حجم الهامش الداخلي في الأسفل.
• القيمة الرابعة ستمثل حجم الهامش الداخلي جهة اليسار.

div {
    padding: 20px 15px 10px 5px;
}

إزالة الهامش الداخلي للعنصر

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

في المثال التالي قمنا بإزالة الهامش الداخلي من كل الجهات.

div {
    padding: 0;
}

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

div {
    padding: 20px 0;
}