الطريقة التي تعاملت بها المتصفحات مع المساحة البيضاء ليست بديهية للغاية في البداية ، خاصة إذا قارنت كيفية تعامل لغة ترميز النص التشعبي مع المساحة البيضاء بالنسبة إلى برامج معالجة الكلمات. في برنامج معالجة الكلمات ، يمكنك إضافة الكثير من المسافات أو علامات التبويب في المستند وسوف ينعكس هذا التباعد في عرض محتوى المستند. تصميم WYSIWYG هذا ليس هو الحال مع HTML أو مع صفحات الويب.
التباعد في الطباعة
في برامج معالجة الكلمات ، تكون أحرف المسافات البيضاء الثلاثة الأساسية هي الفضاء, التبويب، و إرجاع. تعمل كل من هذه الأحرف بطريقة مميزة ، ولكن في HTML ، تجعل المتصفحات جميعها متشابهة بشكل أساسي. سواء كنت تضع مساحة واحدة أو 100 مكان في ترميز HTML أو اخلط المسافات مع علامات الجدولة وعودة السطر ، فسيتم تكثيف كل هذه المسافات إلى مساحة واحدة عندما يتم تقديم الصفحة بواسطة المتصفح. في مصطلحات تصميم الويب ، يُعرف هذا باسم انهيار مساحة بيضاء. لا يمكنك استخدام مفاتيح التباعد النموذجية هذه لإضافة مسافة بيضاء في صفحة ويب لأن المتصفح يقوم بطي المسافات المتكررة في مساحة واحدة فقط عند عرضها في المتصفح ،
استخدام CSS لإنشاء علامات تبويب وتباعد HTML
تم تصميم مواقع الويب اليوم بفصل بين الهيكل والأسلوب. يتم التعامل مع بنية الصفحة بواسطة HTML بينما يتم إملاء النمط بواسطة Cascading Style Sheets. لإنشاء تباعد أو تحقيق تخطيط معين ، انتقل إلى CSS بدلاً من إضافة أحرف تباعد إلى تعليمات HTML البرمجية.
إذا كنت تحاول استخدام نوافذ التبويب لإنشاء أعمدة نصية ، استخدم بدلاً من ذلك
إذا كانت البيانات التي تقوم بتخطيطها عبارة عن بيانات جدولية ، فاستخدم الجداول لمحاذاة تلك البيانات كما تريد. غالبًا ما تحصل الجداول على سمعة سيئة في تصميم الويب لأنه تم إساءة استخدامها كأدوات تخطيط خالصة لسنوات عديدة ، لكن الجداول لا تزال صالحة تمامًا إذا كان المحتوى الخاص بك يحتوي على بيانات جدولة حقيقية.
الهوامش والمساحة والمسافة البادئة للنص
أكثر الطرق شيوعًا لإنشاء مسافات باستخدام CSS هي استخدام أحد أنماط CSS التالية:
- حافة
- حشوة
- المسافة البادئة النص
على سبيل المثال ، ضع مسافة بادئة للسطر الأول من فقرة مثل علامة تبويب باستخدام CSS التالي (لاحظ أن هذا يفترض أن فقرتك تحتوي على سمة فئة "الأولى" مرفقة بها):
ص أولا {
مسافة بادئة نصية: 5em ؛
}
المسافة البادئة لهذه الفقرة حوالي خمسة أحرف.
استخدم خصائص الهامش أو المساحة المتروكة في CSS لإضافة تباعد إلى أعلى أو أسفل أو يسار أو يمين (أو مجموعات من تلك الجوانب) عنصر. حقق أي نوع من التباعد المطلوب بالتحول إلى CSS.
نقل النص بأكثر من مسافة بدون CSS
إذا كان كل ما تريده هو نقل النص لأكثر من مسافة واحدة بعيدًا عن العنصر السابق ، فاستخدم المسافة غير المنقسمة.
لاستخدام المساحة غير المنقسمة ، أضف عدد المرات التي تحتاجها في ترميز HTML الخاص بك.
تحترم HTML هذه المسافات غير المنقسمة ولن تطويها إلى مسافة واحدة. ومع ذلك ، يعتبر هذا الأسلوب ممارسة سيئة لأنه يضيف ترميز HTML إضافيًا إلى مستند فقط لتحقيق احتياجات التخطيط. عندما يكون ذلك ممكنًا ، تجنب إضافة مسافات غير منقسمة ببساطة لتحقيق تأثير التخطيط المطلوب والاستخدام هوامش وحشو CSS في حين أن.