ماهو "الكود السحري" في لغة ال"css" ؟

يوجد قيمة إفتراضية لكل خاصية في عنصر HTML منها الهوامش الداخلية و الخارجية.. فعند محاولة تصميم صفحة ما ستعترضنا بعض المساحات الفارغة و صعوبة في ضبط قيم عرض و ارتفاع العناصر و غيرها. فنقوم بإلغاء هذه المسافات بعمل الشيفرة السابقة.

حيث تعبر * عن جميع العناصر في صفحة HTML.

margin: هي المسافة التي تحيط بالعنصر و تفصله عن جيرانه وتبدأ من الحدود border للخارج

padding: هي المسافة التي يضمها العنصر نفسه و تحوي المحتوى (النص أو الصورة) وتوجد داخل حدود العنصر.

box-sizing: هي خاصية تخبر المتصفح بكيفية حساب أبعاد العنصر من طول و عرض، وعند إسناد قيمة border-box تعمل على حساب العنصر كصندوف مع الحواف (الحدود الخاصة به) لكي يتم تضمينها و حسابها بدقة عند تحديد الأبعاد

-( الشيفرة لديك ينقصها - بين الكلمتين)

الصورة المرفقة توضح المناطق التي ذكرتها

بالإضافة للشرح في التعليق السابق وقد شرح كل خاصية وما فائدتها ولكن لماذا نضيف هذه الخصائص عند كل مشروع غالباً؟

إفتراضياً يكون هناك بعض ال margin و ال padding ولتوحيد هذه القيم حتى لا يحدث أي إختلافات وحتى نتحكم في القيم الكلية بدون أن يضيف المتصفح بعض هذه الخصائص إفتراضياً نقوم نحن بجعلها صفر من البداية

وبالنسبة لل box sizing نقوم بجعل القيمة border-box حتى إذا حددنا مساحته لا تزيد بزيادة ال padding أو ال border وتبقى مساحته كما حددناها

وبالأخير نقوم بإضافة هذه التنسيقات لزيادة التحكم في الصفحة