قد يكون من الصعب فهم إنشاء المسافات والفصل المادي للعناصر في HTML لمصمم الويب المبتدئين. هذا بسبب لغة البرمجة له خاصية تعرف باسم "انهيار المسافة البيضاء". سواء أكتبت مسافة 1 أو 100 في كود HTML الخاص بك ، فإن متصفح الويب يقوم تلقائيًا بتقليص هذه المسافات إلى مساحة واحدة فقط. هذا يختلف عن برنامج مثل مايكروسوفت وورد، والذي يسمح لمنشئي المستندات بإضافة مسافات متعددة لفصل الكلمات والعناصر الأخرى في ذلك المستند. هذه ليست الطريقة التي تعمل بها المباعدة بين تصميم مواقع الويب.
إذن ، كيف تضيف مسافات بيضاء في HTML تظهر في ملف صفحة الويب التي قمت بإنشائها? تتناول هذه المقالة بفحص بعض الطرق المختلفة.
المسافات في HTML مع CSS
الطريقة المفضلة لإضافة مسافات في HTML الخاص بك هي باستخدام أوراق الأنماط المتتالية (CSS). يجب استخدام CSS لإضافة أي جوانب مرئية لصفحة الويب ، وبما أن التباعد هو جزء من خصائص التصميم المرئي للصفحة ، فإن CSS هو المكان الذي تريد القيام بذلك فيه.
في CSS ، يمكنك استخدام خصائص الهامش أو المساحة المتروكة لإضافة مساحة حول العناصر. بالإضافة إلى ذلك ، تضيف خاصية المسافة البادئة للنص مسافة إلى مقدمة النص ، مثل المسافة البادئة للفقرات.
فيما يلي مثال على كيفية استخدام CSS لإضافة مسافة أمام كل فقراتك. أضف CSS التالية إلى ملف خارجي أو داخلي ورقة الأنماط:
ص {
مسافة بادئة نصية: 3em ؛
}
مسافات في HTML داخل النص الخاص بك
إذا كنت ترغب فقط في إضافة مسافة إضافية أو اثنتين إلى النص الخاص بك ، فيمكنك استخدام المساحة غير المنقسمة. تعمل هذه الشخصية تمامًا مثل حرف المسافة القياسي ، لكنها لا تنهار داخل المتصفح.
فيما يلي مثال على كيفية إضافة خمس مسافات داخل سطر نصي:
يحتوي هذا النص على خمس مسافات إضافية بداخله
يستخدم HTML:
يحتوي هذا النص على خمس مسافات إضافية بداخله
يمكنك أيضًا استخدام ملف
علامة لإضافة فواصل أسطر إضافية.
تحتوي هذه الجملة على خمسة فواصل أسطر في نهايتها
لماذا يعتبر التباعد في HTML فكرة سيئة
بينما يعمل كلا الخيارين - سيضيف عنصر المسافات غير الفاصلة بالفعل مسافات إلى النص والخط ستضيف الفواصل مسافات أسفل الفقرة الموضحة أعلاه - ليست هذه هي أفضل طريقة لإنشاء مسافات في الخاص بك صفحة على الإنترنت. تضيف إضافة هذه العناصر إلى HTML معلومات مرئية إلى الشفرة بدلاً من فصل بنية الصفحة (HTML) عن الأنماط المرئية (CSS). تملي أفضل الممارسات أن تكون منفصلة لعدد من الأسباب ، بما في ذلك سهولة التحديث في المستقبل وحجم الملف الكلي و أداء الصفحة.
إذا كنت تستخدم ورقة أنماط خارجية لإملاء كل الأنماط والتباعد ، فمن السهل تغيير هذه الأنماط للموقع بأكمله ، حيث يتعين عليك ببساطة تحديث ورقة الأنماط الواحدة هذه.
تأمل المثال أعلاه من الجملة مع خمسة
في نهايته. إذا كنت تريد هذا القدر من التباعد في أسفل كل فقرة ، فستحتاج إلى إضافة كود HTML هذا إلى كل فقرة في موقعك بالكامل. هذا قدر لا بأس به من الترميز الإضافي الذي سيؤدي إلى تضخم صفحاتك. بالإضافة إلى ذلك ، إذا قررت أن هذا التباعد كبير جدًا أو قليل جدًا ، وترغب في تغييره قليلاً ، فستحتاج إلى تعديل كل فقرة في موقع الويب الخاص بك بالكامل. لا، شكرا!
بدلاً من إضافة عناصر التباعد هذه إلى التعليمات البرمجية الخاصة بك ، استخدم CSS.
ص {
الحشو السفلي: 20 بكسل ؛
}
سيضيف هذا السطر الواحد من CSS مسافات أسفل فقرات صفحتك. إذا كنت ترغب في تغيير هذا التباعد في المستقبل ، فقم بتحرير هذا السطر الواحد (بدلاً من رمز موقعك بالكامل) وأنت على ما يرام!
الآن ، إذا كنت بحاجة إلى إضافة مساحة واحدة في جزء واحد من موقع الويب الخاص بك ، باستخدام ملف
علامة أو مسافة واحدة غير منقسمة ليست نهاية العالم ، ولكن عليك توخي الحذر. يمكن أن يكون استخدام خيارات تباعد HTML المضمنة منحدرًا زلقًا. على الرغم من أن واحدًا أو اثنين قد لا يضران بموقعك ، إلا أنك إذا واصلت السير في هذا المسار ، فسوف تعرض مشاكل في صفحاتك. في النهاية ، من الأفضل أن تتحول إلى CSS لتباعد HTML ، وجميع الاحتياجات المرئية الأخرى لصفحات الويب.