كيف تصنع HTML بيضاء

إنشاء مسافات وفصل فعلي للعناصر في HTML مع CSS

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

هذه ليست طريقة عمل تباعد تصميم الموقع.

لذا ، كيف تضيف المسافات البيضاء في HTML التي تظهر على صفحة الويب ؟ تتناول هذه المقالة بعض الطرق المختلفة.

المسافات في HTML مع CSS

الطريقة المفضلة لإضافة مسافات في HTML الخاص بك هي مع أوراق الأنماط المتتالية (CSS) . يجب استخدام CSS لإضافة أي جوانب مرئية لصفحة ويب ، وبما أن التباعد هو جزء من خصائص التصميم المرئي للصفحة ، فإن CSS هي المكان الذي تريد أن يتم فيه هذا.

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

في ما يلي مثال على كيفية استخدام CSS لإضافة مساحة أمام جميع فقراتك. أضف CSS إلى ورقة الأنماط الخارجية أو الداخلية التالية :

ص {
مسافة بادئة للنص: 3em؛
}

المساحات في HTML: داخل النص الخاص بك

إذا كنت ترغب فقط في إضافة مسافة إضافية أو اثنتين إلى النص الخاص بك ، فيمكنك استخدام المساحة غير القابلة للكسر.

تتصرف هذه الشخصية تمامًا كحرف مسافات قياسي ، ولكنها لا تنهار داخل المتصفح.

في ما يلي مثال على كيفية إضافة خمسة مسافات داخل سطر من النص:

يحتوي هذا النص على خمسة مساحات إضافية داخله

يستخدم HTML:

هذا النص له & nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛ & nbsp؛ خمسة مساحات إضافية داخله

يمكنك أيضًا استخدام العلامة
لإضافة فواصل أسطر إضافية.

تحتوي هذه الجملة على خمسة فواصل أسطر في نهايتها

لماذا التباعد في HTML هو فكرة سيئة

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

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

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

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

بدلاً من إضافة عناصر المسافات هذه إلى شفرتك ، استخدم CSS.

ص {
الحشو السفلي: 20 بكسل.
}

سيضيف سطر واحد من CSS مسافات ضمن فقرات صفحتك. إذا أردت تغيير هذه المسافة في المستقبل ، فعدّل هذا السطر (بدلاً من رمز موقعك بالكامل) ، وأنت على أتم استعداد!

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

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