هااام✨
يمكنك التحكم بالمتصفحات من جهة العرض (اليمين واليسار) لان العرض محدود بينما الارتفاع غير متوقع وعلى حسب التصميم سيمتد للاسفل بينما ان عرض الشاشة ثابت بالتالي هناك قيمة يمكن ان توسط العنصر في وسط الشاشة بالنسبة للعرض وهي auto
اي اذا اردت ان توسط عنصر في وسط الشاشة تماما فستجرب المقاس المناسب اعلى واسفل والعرض سيكون auto
margin 200px auto

الان بتطبيق الخواص السابقة على الفورم لعرض الحدود والخلفية واستدارة الحواف

ستكون هذه النتيجة

لابد انك مدرك ان العرض الافتراضي width للعناصر يأخذ 100% من عرض الشاشة
اذا تحتاج لان تضبط العرض بما يناسب المحتوى
وحدات القياس عديدة دعونا نلتزم الان بالبكسل

ولنضع مثلا width:350px;

ستبدو بالشكل التالي
الان حان الوقت للتوسيط

احتاج لدفع الفورم باتجاه الاسفل وباتجاه اليمين ليتوسط في وسط الشاشة وكما قلنا سابقا ساستخدم auto للعرض (اليمين واليسار)

margin:200px auto;

نفتح تعليق خلفية الصورة

بهذا الـ style

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

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

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

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

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