الدرس 1 من 8
نموذج الصندوق
- 12 دقيقة
- 4 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
لماذا 200 ليست 200
01
الشرح
تكتب width: 200px ثم تقيس العنصر فتجده 248. السبب أن الافتراضي content-box: العرض للمحتوى وحده، والحشو والإطار يُضافان فوقه.
box-sizing: border-box يقلب المعادلة: العرض يشمل الحشو والإطار، فـ200 تعني 200. ولهذا تبدأ كل قاعدة CSS احترافية تقريبًا بـ *{box-sizing:border-box}.
والحشو داخل والهامش خارج: الحشو يكبّر الصندوق ويأخذ لون خلفيته، والهامش يبعده عن جيرانه ويبقى شفافًا.
02
المطلوب
اجعل عرض .box المرسوم 200 بكسل بالضبط، مع إبقاء الحشو والإطار كما هما.
معايير التصحيح
4 معايير- box-sizing هو border-box
- العرض المرسوم 200 بكسل بالضبط
- الحشو ما زال 20 بكسل
- الإطار ما زال موجودًا