انتقل إلى محتوى الدرس

CSS padding top الهوامش الداخلية العلوية في لغة CSS

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

1 صفوف تعليمية
لغة CSS
4,524 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تًستخدم خاصية padding-top لعمل هامش داخلي أعلي العنصر في لغة CSS وقيمة الهامش الداخلي العلوي في الوضع الأفتراضي هي صفر أي انه بدون هامش.


قيم خاصية padding-top في لغة CSS:

  • length تحديد الهامش الداخلي العلوي بالوحدات ثابتة px,pt,cm.
  • percentage يتم تحديد الهامش الداخلي العلوي بناء علي حجم عرض محتوي العنصر %.

padding-top syntax

طريقة كتابة خاصية padding-top في لغة CSS.

HTML
padding-top:value;

padding-top values

قيم خاصية padding-top في لغة CSS.

HTML
padding-top:length|percentage|initial|inherit;

CSS no padding

عرض العنصر بدون هوامش داخلي CSS.

HTML
p
{
  border: 1px dotted black;
  background-color: yellow;
}

CSS padding top

المسافة بين عنصر h1 وعنصر p هي مسافة padding top وهي 100 px.

HTML
p
{
  border: 1px dotted black;
  padding-top: 100px;
  background-color: yellow;
}

CSS padding top percentage

ضبط مساحة padding top بالنسبة المئوية في لغة CSS.

HTML
p
{
  border: 1px dotted black;
  padding-top: 10%;
  background-color: yellow;
}