❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSالهوامش الداخلية

  • مفهوم الهامش الداخلي
  • إضافة هامش داخلي من جهة محددة
  • تحديد الهامش الداخلي من كل الجهات بسطر واحد
  • إزالة الهامش الداخلي للعنصر

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

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

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

There is padding 50px between the text and borders

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

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

  • 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;
}
.demo { padding-top: 20px; padding-bottom: 20px; padding-right: 15px; padding-left: 15px; border: 1px solid gray; }
تجربة الكود

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

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


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

مثال

div {
padding: 30px;
}
div { padding: 30px; }
تجربة الكود

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

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

مثال

div {
padding: 20px 15px;
}
div { padding: 20px 15px; }
تجربة الكود

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

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

مثال

div {
padding: 20px 15px 10px;
}
div { padding: 20px 15px 10px; }
تجربة الكود

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

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

مثال

div {
padding: 20px 15px 10px 5px;
}
div { padding: 20px 15px 10px 5px; }
تجربة الكود

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

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


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

مثال

div {
padding: 0;
}
div { padding: 0; }
تجربة الكود

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

مثال

div {
padding: 20px 0;
}
div { padding: 20px 0; }
تجربة الكود

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

الدرس التالي❯ ❮الدرس السابق