نفس الامر تماما ينطبق على الـpadding

لاحظ كيف ان العناصر لاصقه على الحدود هذا يعني اننا بحاجة الى عمل مسافة داخليه وهذا ما يسمى padding

لا احتاج مسافة لاعلى واسفل فثبتها ب 0 واضفت 20 بكسل للجانبين

جهزنا الخلفية والفورم
تالياً نحتاج لتنسيق محتويات الفورم وهي:
h1
input
button
p
a

وتذكر نحن الان داخل الفورم اخذنا 350 بكسل العرض ✨

نبدأ بتنسيق النصوص الموجودة داخل الـ Login (تنسيق النصوص Text)

وكل هذه المواضيع تخص النص

نحتاج في هذه المثال لمعرفة اثنين فقط
color
alignment

الاول لون النص (ولا اسهل)
h1{
color: #000000
}

الثاني اتجاه النص:
وهناك الخيارات التالية:

في مثالنا نحتاج لتوسيطها داخل الفورم بالتالي سنستخدم center

✨ملاحظة:
كل عنصر قد يكون اب (parent) وقد يكون ابن (child)
مثلا الـform ابن الـ body
والـh1 ابن form
لذا فعندما اوسط الـform فإنه سيكون وسط بالنسبة للاب body
وعندما اوسط الـعنوان فانها ستوسط بالنسبة للـform

الخاصية text-align:center ستوسط كل عنصر من نوع نص أو حتى يحتوي على نص
وبما اني اريد توسيط كل محتويات الـ form فبدلا من تكرار الخاصية على كل العناصر سأكتبها مرة واحدة في الـ form

بالنسبة للعنوان h1 (login) يحتاج إلى تغير لونه إلى اللون الأبيض