وثائق HTML قابلة للتشغيل: المسافة في HTML

Q: ما الفرق بين و&emsp;؟

عرض مثل المسافة العادية. عرض &ensp; نصف em، و&emsp; بعرض em واحد (أي حجم الخط). &ensp; و&emsp; لا تُدمجان، لكن على عكس يمكن أن ينكسر السطر عندهما.

إضافة مسافات في HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spaces</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>Five typed spaces:     one shows.</p>
  <p>Five nbsp entities:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;five show.</p>
</body>
</html>

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

ما وظيفة

  هو المسافة غير القابلة للكسر (المحرف U+00A0). له أثران:

لا يُدمج أبدًا، فثلاثة منه تصنع ثلاث مسافات.
لا ينكسر السطر عنده أبدًا، فتبقى الكلمتان على جانبيه معًا.

الأثر الثاني هو وظيفته الحقيقية. الأرقام ووحداتها، والأحرف الأولى من الأسماء، والعبارات القصيرة التي يبدو تقسيمها على سطرين خاطئًا، كلها تُربط بـ  :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Non-breaking space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 170px; border: 2px solid #e5e7eb; padding: 4px; }
    .nb { border-color: #16a34a; }
  </style>
</head>
<body>
  <p>The race is exactly 10 km long and starts at 9 am.</p>
  <p class="nb">The race is exactly 10&nbsp;km long and starts at 9&nbsp;am.</p>
</body>
</html>

في الصندوق الرمادي ينتهي «10» و«km» في سطرين مختلفين. في الأخضر لا يمكن فصلهما. لإبقاء مقطع أطول معًا، يكون white-space: nowrap على span أسهل من تسلسل الكيانات، راجع صفحة السطر الجديد.

كيانات مسافة بعروض مختلفة

في HTML محارف مسماة لمسافات أعرض وأضيق. هي أيضًا لا تُدمج، لذلك تفيد في ضبط التباعد الدقيق داخل النص:

الكيان	الاسم	العرض
` `	مسافة غير قابلة للكسر	مثل المسافة العادية
`&ensp;`	مسافة en	نصف em
`&emsp;`	مسافة em	em واحد (حجم الخط)
` `	مسافة رفيعة	جزء من em، يعتمد على الخط
` `	مسافة ضيقة غير قابلة للكسر	رفيعة، ولا يُكسر السطر عندها

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space widths</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; }
    mark { background: #bfdbfe; }
  </style>
</head>
<body>
  <p>A<mark>&nbsp;</mark>B nbsp</p>
  <p>A<mark>&ensp;</mark>B ensp</p>
  <p>A<mark>&emsp;</mark>B emsp</p>
  <p>A<mark>&thinsp;</mark>B thinsp</p>
</body>
</html>

يوضح التظليل الأزرق عرض كل مسافة. وحدهما   و  يمنعان أيضًا كسر السطر.

الحفاظ على كل المسافات: pre وwhite-space

عندما يكون التباعد جزءًا من المحتوى (شيفرة، رسوم ASCII، أعمدة محاذاة، شعر)، حافظ على كل المسافات البيضاء بدلًا من إضافة كيانات. العنصر <pre> يفعل ذلك افتراضيًا، وخاصية CSS white-space تفعله لأي عنصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; padding: 6px; margin-bottom: 8px; font-family: monospace; }
    .pre { white-space: pre; border-color: #2563eb; }
    .prewrap { white-space: pre-wrap; border-color: #f59e0b; }
  </style>
</head>
<body>
  <div>Name    Score
Ana     12</div>
  <div class="pre">Name    Score
Ana     12</div>
  <div class="prewrap">Name    Score
Ana     12</div>
  <pre>pre   keeps   spaces   too</pre>
</body>
</html>

قيمة `white-space`	المسافات	الأسطر الجديدة	التفاف الأسطر الطويلة
`normal` (الافتراضية)	تُدمج	تصبح مسافات	نعم
`nowrap`	تُدمج	تصبح مسافات	لا
`pre`	تُحفظ	تُحفظ	لا
`pre-wrap`	تُحفظ	تُحفظ	نعم
`pre-line`	تُدمج	تُحفظ	نعم

pre-wrap هي عادةً ما تريده لنص المستخدم: تحافظ على التباعد وتلتف داخل الشاشات الضيقة. أما pre فتُبقي الأسطر كما هي، فيظهر شريط تمرير أو يفيض النص بدلًا من ذلك.

مسافات الجدولة تُحفظ داخل pre أيضًا. عرضها 8 مسافات افتراضيًا، وخاصية tab-size تغيّره (tab-size: 4).

التباعد بـ CSS

معظم حالات «أحتاج مسافة هنا» هي في الحقيقة تخطيط، وCSS ينجزها أفضل من الكيانات، لأن الفجوة تبقى متسقة وتتغير من مكان واحد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .icon { margin-inline-end: 12px; color: #2563eb; }
    .wide { letter-spacing: 0.3em; }
    .words { word-spacing: 1em; }
    .buttons { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <p><span class="icon">&#9733;</span>margin after an icon</p>
  <p class="wide">letter-spacing</p>
  <p class="words">word spacing between words</p>
  <div class="buttons"><button>One</button><button>Two</button><button>Three</button></div>
</body>
</html>

margin وpadding يباعدان العناصر، وgap يباعد العناصر داخل حاوية flex أو grid، وletter-spacing وword-spacing يباعدان النص نفسه. لإزاحة السطر الأول من الفقرة استخدم text-indent، وتشرحه صفحة توسيط النص.

الفجوة بين العناصر السطرية

الوجه الآخر للدمج: المسافة البيضاء بين عنصرين سطريين أو inline-block ما زالت تُحسب كمسافة واحدة. سطر جديد بين زرين في الشيفرة يضع فجوة صغيرة بينهما:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline gap</title>
  <style>
    span { display: inline-block; width: 60px; height: 30px; background: #2563eb; }
    .flex { display: flex; margin-top: 8px; }
  </style>
</head>
<body>
  <div>
    <span></span>
    <span></span>
  </div>
  <div class="flex">
    <span></span>
    <span></span>
  </div>
</body>
</html>

في الزوج الأول فجوة ناتجة عن السطر الجديد في الشيفرة. أما في حاوية flex فتُتجاهل المسافات البيضاء بين العناصر، لذلك يتلامس الزوج الثاني. استخدم flex وgap حين تريد التحكم في المسافة بدقة.

أخطاء شائعة

سلاسل من   للتخطيط. تنهار بمجرد أن يتغير الخط أو حجم الشاشة. استخدم margin أو padding أو gap.
كتابة مسافات إضافية وتوقع ظهورها. تُدمج. استخدم   أو white-space: pre-wrap.
كتابة &nbsp بلا فاصلة منقوطة. تقبلها المتصفحات عادةً، لكنها غير صالحة وتفشل في بعض المواضع. أنهِها دائمًا بـ ;.
استخدام   في كل مكان لمنع الالتفاف. المقطع الطويل غير القابل للكسر يفيض على شاشات الهواتف. اربط فقط ما يجب أن يبقى معًا.
إزاحة الفقرات بالمسافات. استخدم text-indent في CSS.

الأسئلة الشائعة

كيف أضيف مسافة في HTML؟

المسافة الواحدة تعمل كما تكتبها، لكن المسافات الإضافية تُدمج في مسافة واحدة. لمزيد من المسافات استخدم كيان المسافة غير القابلة للكسر  ، واحدًا لكل مسافة: a   b. أما فجوات التخطيط فاستخدم لها margin أو padding أو gap في CSS.

ما معنى   في HTML؟

  مسافة غير قابلة للكسر. تبدو مثل المسافة العادية، لكن المتصفح لا يكسر السطر عندها أبدًا ولا يدمجها، فتُبقي كلمات مثل 10 km معًا وتتيح لك إضافة مسافات إضافية.

لماذا يتجاهل HTML المسافات التي أكتبها؟

يدمج HTML المسافات البيضاء: أي تتابع من المسافات ومسافات الجدولة والأسطر الجديدة يُعرض كمسافة واحدة، وتُحذف المسافات في بداية السطر ونهايته. استخدم   أو <pre> أو خاصية CSS white-space للحفاظ عليها.

كيف أضيف مسافة Tab في HTML؟

لا يوجد في HTML محرف Tab مرئي خارج النص المنسق مسبقًا. داخل <pre> أو عنصر يحمل white-space: pre يُحفظ محرف Tab، وتحدد خاصية CSS tab-size عرضه. لإزاحة فقرة استخدم text-indent أو padding-inline-start في CSS.

ما الفرق بين   و&emsp;؟

عرض   مثل المسافة العادية. عرض &ensp; نصف em، و&emsp; بعرض em واحد (أي حجم الخط). &ensp; و&emsp; لا تُدمجان، لكن على عكس   يمكن أن ينكسر السطر عندهما.

مفاهيم ذات صلة

المسافة في HTML:   والمسافات المتعددة وwhite-space