كيف تقوم بعمل Padding لل Scroll في Html 

عندما تحتاج إلى عمل Scoll أو تمرير في صفحة الويب الخاصة بك ..

فإنك عادة تقوم بوضع # إلى جانب المعرف الخاص بالعنصر "id"
كمثال .
https://nafezly.com/project#project-id
حيث #project-id هو ال id الخاص بالعنصر .
ومباشرةً سيكون العنصر في مقدمة الصفحة .بطريقة مباشرة 

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

حتى يكون الجزء المعروض ظاهر للمستخدم ولا يشعر بوجود عناصر أعلى العنصر المراد إظهاره ..

لتصبح هكذا

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

html {
      scroll-padding-top: 4rem;
}