للوصول إلى هذه النتيجة

تاليا نحتاج إلى بناء ال form بالمحتوى التالي:

كود الفورم كما تعلمنا في الـ HTML

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

spacing:
1- margin
2- padding

الهامش يعني خارج الصندوق
الحواف تعني المسافة داخل الصندوق

وكترتيب الحواف
top - right - bottom - left
اي عندما تكتب:
margin: 50px 10px 30px 10px;
فإنها ستاخذ ترتيب الاتجاهات بالضبط
واذا اردت ان يكون الاعلى والاسفل نفس القيمة واليمين واليسار نفس القيمة:
margin: 100px 150px 100px 150px;
ولمنع التكرار ستكتفي بكتابة:
margin: 100px 150px;
حيث القيمة الأولى للأعلى والاسفل والقيمة الثانية لليمين واليسار

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

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

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

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

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

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

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

margin:200px auto;

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

بهذا الـ style