Dokumentacja HTML z przykładami: Spacje

Q: Czym różni się od &emsp;?

jest szeroka jak zwykła spacja. &ensp; ma szerokość pół ema, a &emsp; jednego ema (szerokości rozmiaru czcionki). &ensp; i &emsp; się nie scalają, ale w odróżnieniu od linia nadal może się przy nich złamać.

Dodawanie spacji w HTML

Wpisz pięć spacji między dwoma słowami w HTML, a przeglądarka pokaże jedną. Każdy ciąg spacji, tabulatorów i znaków nowej linii scala się w jedną spację. Żeby dodać dodatkowe spacje, użyj encji twardej spacji  , raz na każdą spację:

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

  sprawdza się przy kilku spacjach w linii tekstu. Przy większych odstępach albo odstępach między elementami używaj CSS, pokazanego niżej.

Co robi

  to twarda spacja (znak U+00A0). Ma dwa efekty:

Nigdy się nie scala, więc trzy takie encje dają trzy spacje.
Linia nigdy się przy niej nie łamie, więc słowa po obu stronach zostają razem.

To drugie jest jej prawdziwym zadaniem. Liczby z jednostkami, inicjały i krótkie wyrażenia, które źle wyglądają rozdzielone na dwie linie, łączy się przez  :

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

W szarym polu "10" i "km" lądują w różnych liniach. W zielonym nie da się ich rozdzielić. Żeby utrzymać razem dłuższy fragment, white-space: nowrap na spanie jest prostsze niż łańcuch encji; zobacz stronę o nowej linii.

Encje spacji o różnej szerokości

HTML ma nazwane znaki dla szerszych i węższych spacji. One też się nie scalają, więc przydają się do precyzyjnych odstępów w tekście:

Encja	Nazwa	Szerokość
` `	Twarda spacja	Taka jak zwykła spacja
`&ensp;`	Spacja półfiretowa (en space)	Pół ema
`&emsp;`	Spacja firetowa (em space)	Jeden em (rozmiar czcionki)
` `	Wąska spacja (thin space)	Ułamek ema, zależny od czcionki
` `	Wąska twarda spacja	Wąska i bez łamania linii

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

Niebieskie podświetlenie pokazuje szerokość każdej spacji. Tylko   i   blokują też łamanie linii.

Zachowanie wszystkich spacji: pre i white-space

Gdy odstępy są częścią treści (kod, ASCII art, wyrównane kolumny, poezja), zachowaj wszystkie białe znaki zamiast dodawać encje. Element <pre> robi to domyślnie, a właściwość CSS white-space robi to dla dowolnego elementu:

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

Wartość `white-space`	Spacje	Znaki nowej linii	Zawija długie linie
`normal` (domyślna)	Scalane	Stają się spacjami	Tak
`nowrap`	Scalane	Stają się spacjami	Nie
`pre`	Zachowane	Zachowane	Nie
`pre-wrap`	Zachowane	Zachowane	Tak
`pre-line`	Scalane	Zachowane	Tak

Dla tekstu od użytkownika zwykle najlepsze jest pre-wrap: zachowuje odstępy i nadal zawija tekst na wąskich ekranach. pre zostawia linie bez zmian i zamiast zawijać, przewija albo wychodzi poza pole.

W pre zachowywane są też tabulatory. Domyślnie mają szerokość 8 spacji, a właściwość tab-size to zmienia (tab-size: 4).

Odstępy w CSS

Większość sytuacji "potrzebuję tu spacji" to tak naprawdę układ, a CSS radzi sobie z nim lepiej niż encje, bo odstęp jest spójny i zmienia się go w jednym miejscu:

<!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 i padding oddzielają elementy, gap oddziela elementy w kontenerze flex lub grid, a letter-spacing i word-spacing rozsuwają sam tekst. Żeby wciąć pierwszą linię akapitu, użyj text-indent, opisanego na stronie o wyśrodkowaniu tekstu.

Odstęp między elementami inline

Druga strona scalania: białe znaki między dwoma elementami inline lub inline-block nadal liczą się jako jedna spacja. Znak nowej linii między dwoma przyciskami w kodzie tworzy między nimi mały odstęp:

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

Pierwsza para ma odstęp ze znaku nowej linii w kodzie. W kontenerze flex białe znaki między elementami są ignorowane, więc druga para się styka. Używaj flexa i gap, gdy chcesz dokładnie kontrolować odstęp.

Częste błędy

Łańcuchy   do układu. Psują się, gdy tylko zmieni się czcionka albo rozmiar ekranu. Używaj margin, padding albo gap.
Wpisywanie dodatkowych spacji i oczekiwanie, że będą widoczne. Scalają się. Użyj   albo white-space: pre-wrap.
Pisanie &nbsp bez średnika. Przeglądarki zwykle to akceptują, ale to niepoprawne i w niektórych miejscach nie działa. Zawsze kończ na ;.
Używanie   wszędzie, żeby zablokować zawijanie. Długi ciąg tekstu bez możliwości łamania wychodzi poza ekran na telefonach. Łącz tylko to, co musi zostać razem.
Wcinanie akapitów spacjami. Użyj text-indent w CSS.

Najczęściej zadawane pytania

Jak dodać spację w HTML?

Pojedyncza spacja działa tak, jak ją wpiszesz, ale dodatkowe spacje scalają się w jedną. Żeby dodać więcej, użyj encji twardej spacji  , jednej na każdą spację: a   b. Do odstępów w układzie używaj zamiast tego margin, padding albo gap w CSS.

Co oznacza   w HTML?

  to twarda spacja (non-breaking space). Wygląda jak zwykła spacja, ale przeglądarka nigdy nie łamie przy niej linii i nigdy jej nie scala, więc utrzymuje razem wyrażenia takie jak 10 km i pozwala dodawać dodatkowe spacje.

Dlaczego HTML ignoruje moje spacje?

HTML scala białe znaki: każdy ciąg spacji, tabulatorów i znaków nowej linii wyświetla się jako jedna spacja, a białe znaki na początku i końcu linii są usuwane. Żeby je zachować, użyj  , <pre> albo właściwości CSS white-space.

Jak dodać tabulator w HTML?

Poza tekstem preformatowanym HTML nie ma widocznego tabulatora. W <pre> lub elemencie z white-space: pre znak tabulacji jest zachowywany, a właściwość CSS tab-size ustawia jego szerokość. Do wcięcia akapitu użyj text-indent albo padding-inline-start w CSS.

Czym różni się   od &emsp;?

  jest szeroka jak zwykła spacja. &ensp; ma szerokość pół ema, a &emsp; jednego ema (szerokości rozmiaru czcionki). &ensp; i &emsp; się nie scalają, ale w odróżnieniu od   linia nadal może się przy nich złamać.

Powiązane zagadnienia

Spacja w HTML:  , wiele spacji i white-space