תיעוד HTML עם דוגמאות להרצה: רווחים

Q: איך מוסיפים טאב ב-HTML?

ל-HTML אין טאב גלוי מחוץ לטקסט מעוצב מראש. בתוך או אלמנט עם white-space: pre, תו טאב נשמר, והמאפיין tab-size של CSS קובע את הרוחב שלו. להזחת פסקה, השתמשו ב-text-indent או ב-padding-inline-start ב-CSS.

Q: מה ההבדל בין ל-&emsp;?

רחב כמו רווח רגיל. &ensp; ברוחב חצי em ו-&emsp; ברוחב em אחד (הרוחב של גודל הגופן). &ensp; ו-&emsp; לא מתכווצים, אבל בניגוד ל- שורה עדיין יכולה להישבר בהם.

רווח ב-HTML:  , כמה רווחים ו-white-space

דפדפנים מכווצים כל רצף של רווחים ב-HTML לרווח אחד. למדו איך להוסיף רווחים נוספים עם  , מה עושה רווח בלתי שביר, איך לשמור רווחים וטאבים עם <pre> ו-white-space, ומתי ריווח ב-CSS הוא הכלי הטוב יותר.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

הוספת רווחים ב-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 space	חצי em
`&emsp;`	Em space	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> עושה את זה כברירת מחדל, והמאפיין white-space של CSS עושה את זה לכל אלמנט:

<!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

הצד השני של הכיווץ: רווח לבן בין שני אלמנטים מסוג inline או 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> או במאפיין white-space של CSS כדי לשמור אותם.

איך מוסיפים טאב ב-HTML?

ל-HTML אין טאב גלוי מחוץ לטקסט מעוצב מראש. בתוך <pre> או אלמנט עם white-space: pre, תו טאב נשמר, והמאפיין tab-size של CSS קובע את הרוחב שלו. להזחת פסקה, השתמשו ב-text-indent או ב-padding-inline-start ב-CSS.

מה ההבדל בין   ל-&emsp;?

  רחב כמו רווח רגיל. &ensp; ברוחב חצי em ו-&emsp; ברוחב em אחד (הרוחב של גודל הגופן). &ensp; ו-&emsp; לא מתכווצים, אבל בניגוד ל-  שורה עדיין יכולה להישבר בהם.

מושגים קשורים