مصور نموذج مربع CSS

كيفية الاستخدام

1. أدخل قيم نموذج الصندوق: حدد الهامش والحد والتباعد الداخلي وأبعاد المحتوى في الحقول أو أشرطة التمرير التفاعلية.
2. استكشف التصور: يتحدث الرسم البياني الكلاسيكي للصناديق المتداخلة في الوقت الفعلي — الهامش (برتقالي) والحد (أصفر) وpadding (أخضر) والمحتوى (أزرق)، جميعها مُسمَّاة بوضوح.
3. انسخ CSS: انقر على نسخ CSS للحصول على خصائص نموذج الصندوق الكاملة للعنصر المُكوَّن.

لماذا تستخدم مصور نموذج صندوق CSS؟

نموذج صندوق CSS هو أحد أكثر المفاهيم الأساسية في تخطيط الويب — وأحد أكثر مصادر الأخطاء شيوعًا، خاصة عند الخلط بين قيم box-sizing ودمج الهوامش وقياس الحدود. يجعل هذا المصور التفاعلي نموذج الصندوق ملموسًا وملموسًا: تضبط القيم وترى فورًا كيف يتراكم الهامش والحد وpadding حول المحتوى. ضروري للتعلم والتصحيح وتدريس CSS.

الميزات

• رسم بياني تفاعلي: العرض الكلاسيكي لنموذج الصندوق المتداخل بطبقات مرمَّزة بالألوان (الهامش والحد وpadding والمحتوى).
• تبديل box-sizing: انتقل بين content-box وborder-box لرؤية كيف يؤثر كل وضع على الأبعاد الإجمالية.
• جوانب فردية: حدد قيم أعلى/يمين/أسفل/يسار بشكل مستقل للهامش وpadding والحد.
• حساب الحجم الإجمالي: يعرض العرض والارتفاع الإجماليين المحسوبين للعنصر.
• إخراج CSS: يولّد CSS جاهزًا للاستخدام لنموذج الصندوق المُكوَّن.

الأسئلة الشائعة

ما الفرق بين content-box وborder-box؟

مع content-box (الافتراضي)، تنطبق width وheight فقط على منطقة المحتوى — يُضاف padding والحد إلى الحجم الإجمالي للعنصر. مع border-box، تتضمن width وheight padding والحد، مما يجعل الأحجام أكثر قابلية للتوقع. تطبّق معظم CSS resets الحديثة box-sizing: border-box على جميع العناصر.

ما هو دمج الهوامش؟

عندما يتلامس هامشان عموديان (بين عناصر block متجاورة أو بين الأب والطفل الأول/الأخير)، يندمجان في هامش واحد يساوي القيمة الأكبر. لا يحدث هذا مع أطفال flex أو grid، ولا مع عناصر لها padding أو حدود.

كيف أزيل المسافة الإضافية أسفل العناصر inline؟

تحتوي العناصر inline (مثل <img>) على مسافة صغيرة تحتها بسبب محاذاة الخط الأساسي لـ line-height. أصلحها بوضع display: block على العنصر، أو vertical-align: bottom، أو font-size: 0 على الأب.