استخدم CSS للتخلص من الهوامش والحدود

تشرح هذه المقالة كيفية الاستخدام CSS إلى الصفر هوامش والحدود بحيث يتم عرض صفحات الويب الخاصة بك بشكل متسق في كل متصفح.

تطبيع قيم الهوامش والحشو

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

على الرغم من أن هذه القاعدة غير محددة ، نظرًا لأنها موجودة في ورقة الأنماط الخارجية الخاصة بك ، فإنها ستتميز بخصوصية أعلى من قيم المتصفح الافتراضية. نظرًا لأن هذه الإعدادات الافتراضية هي ما تقوم بالكتابة فوقه ، فإن هذا النمط الوحيد سينجز ما تخطط للقيام به.

بمجرد إيقاف تشغيل جميع الهوامش والحشو ، ستحتاج إلى إعادة تشغيلها بشكل انتقائي لأجزاء معينة من صفحة الويب الخاصة بك لتحقيق الشكل والمظهر اللذين يتطلبهما تصميمك.

استخدم CSS لتطبيع الحدود

اكبر سنا إصدارات Internet Explorer كان له حدود شفافة أو غير مرئية حول العناصر. ما لم تقم بتعيين الحد على 0 ، يمكن لهذا الحد أن يفسد تخطيطات صفحتك. إذا قررت أنك ستستمر في دعم هذه الإصدارات القديمة من IE ، فستحتاج إلى معالجة ذلك عن طريق إضافة ما يلي إلى جسمك وأنماط HTML:

HTML ، نص {
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
 الحدود: 0 بكسل ؛
}

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

سبب أهمية الهوامش والحدود المتسقة في تصميم الويب

لقد قطع متصفح الويب اليوم شوطًا طويلاً من الأيام المجنونة حيث كان أي نوع من التناسق عبر المتصفحات بمثابة تفكير بالتمني. متصفحات الويب اليوم متوافقة تمامًا مع المعايير. إنهم يلعبون بشكل جيد معًا ويقدمون عرض صفحة متسق إلى حد ما عبر المتصفحات المختلفة. يتضمن ذلك أحدث إصدارات Google Chrome و Microsoft Edge و Mozilla Firefox و Opera و Safari والمتصفحات المختلفة الموجودة علىالأجهزة المحمولة التي لا تعد ولا تحصى الوصول إلى مواقع الويب اليوم.

بينما تم إحراز تقدم بالتأكيد في كيفية عرض المتصفحات لـ CSS ، لا تزال هناك تناقضات بين خيارات البرامج المختلفة هذه. أحد التناقضات الشائعة هو كيفية حساب هذه المستعرضات للهوامش والمساحة المتروكة والحدود افتراضيًا.

لأن هذه الجوانب من نموذج الصندوق تؤثر على جميع عناصر HTML ، ولأنها ضرورية في إنشاء الصفحة التنسيقات ، فالعرض غير المتسق يعني أن الصفحة قد تبدو رائعة في متصفح واحد ، لكنها تبدو بعيدة قليلاً في اخر. لمكافحة هذه المشكلة ، يقوم العديد من مصممي الويب بتطبيع هذه الجوانب من نموذج الصندوق. تُعرف هذه الممارسة أيضًا باسم التصفير قيم الهوامش ، حشوةو الحدود.

ملاحظة حول الإعدادات الافتراضية للمتصفح

تقوم كل مستعرضات الويب بتعيين الإعدادات الافتراضية لجوانب عرض معينة للصفحة. على سبيل المثال ، تكون الارتباطات التشعبية باللون الأزرق ويتم تسطيرها افتراضيًا. هذا السلوك متسق عبر متصفحات مختلفة ، وعلى الرغم من أنه شيء يغيره معظم المصممين ليناسب التصميم احتياجات مشروعهم المحدد ، فإن حقيقة أنهم بدأوا جميعًا بنفس الإعدادات الافتراضية تجعل من السهل القيام بذلك التغييرات. للأسف ، لا تتمتع القيمة الافتراضية للهوامش والمساحة المتروكة والحدود بنفس مستوى التناسق عبر المستعرضات.