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