Çalıştırılabilir HTML Dokümanları: HTML'de boşluk

Q: ile &emsp; arasındaki fark nedir?

normal bir boşluk kadar geniştir. &ensp; yarım em, &emsp; bir em genişliğindedir (yazı boyutu kadar). &ensp; ve &emsp; birleşmez, ama boşluğunun aksine satır onların yerinden yine de bölünebilir.

HTML'de boşluk eklemek

HTML'de iki kelimenin arasına beş boşluk yaz, tarayıcı bir tane gösterir. Art arda gelen boşluklar, tab'lar ve satır sonları tek bir boşluğa birleşir. Fazladan boşluk eklemek için her boşluk başına bir kez bölünmez boşluk entity'si   kullan:

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

  bir metin satırındaki birkaç boşluk için işe yarar. Daha büyük boşluklar ya da elementler arasındaki boşluk için, aşağıda gösterildiği gibi CSS kullan.

ne yapar

  bölünmez boşluktur (U+00A0 karakteri). İki etkisi vardır:

Asla birleşmez, yani üç tanesi üç boşluk yapar.
Satır asla onun yerinden bölünmez, yani iki yanındaki kelimeler bir arada kalır.

Asıl görevi ikincisidir. Sayılar ve birimleri, baş harfler ve iki satıra bölününce yanlış görünen kısa ifadeler   ile birleştirilir:

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

Gri kutuda "10" ve "km" farklı satırlara düşer. Yeşil kutuda ayrılamazlar. Daha uzun bir parçayı bir arada tutmak için entity'leri art arda dizmek yerine bir span'e white-space: nowrap vermek daha kolaydır; alt satıra geçme sayfasına bak.

Farklı genişlikteki boşluk entity'leri

HTML'de daha geniş ve daha dar boşluklar için adlandırılmış karakterler vardır. Bunlar da birleşmez, bu yüzden metinde ince ayar boşluklar için kullanışlıdır:

Entity	Adı	Genişlik
` `	Bölünmez boşluk	Normal bir boşlukla aynı
`&ensp;`	En boşluğu	Yarım em
`&emsp;`	Em boşluğu	Bir em (yazı boyutu)
` `	İnce boşluk	Bir em'in bir kesri, yazı tipine bağlı
` `	Dar bölünmez boşluk	İnce ve satır bölünmez

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

Mavi vurgu her boşluğun genişliğini gösterir. Satır bölünmesini de yalnızca   ve   engeller.

Her boşluğu korumak: pre ve white-space

Boşluk içeriğin bir parçası olduğunda (kod, ASCII art, hizalı sütunlar, şiir), entity eklemek yerine tüm boşlukları koru. <pre> elementi bunu varsayılan olarak yapar, CSS white-space özelliği de her element için yapar:

<!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` değeri	Boşluklar	Satır sonları	Uzun satırları kaydırır
`normal` (varsayılan)	Birleşir	Boşluğa dönüşür	Evet
`nowrap`	Birleşir	Boşluğa dönüşür	Hayır
`pre`	Korunur	Korunur	Hayır
`pre-wrap`	Korunur	Korunur	Evet
`pre-line`	Birleşir	Korunur	Evet

Kullanıcı metni için genellikle istediğin pre-wrap olur: boşlukları korur ve dar ekranlarda yine de satır kaydırır. pre satırları olduğu gibi tutar ve onun yerine kaydırma çubuğu çıkarır ya da taşar.

Tab'lar da pre içinde korunur. Genişlikleri varsayılan olarak 8 boşluktur ve tab-size özelliği bunu değiştirir (tab-size: 4).

CSS ile boşluk vermek

"Buraya bir boşluk lazım" anlarının çoğu aslında yerleşimle ilgilidir ve CSS bunu entity'lerden daha iyi yapar, çünkü boşluk tutarlı kalır ve tek bir yerden değişir:

<!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 ve padding elementler arasında boşluk bırakır, gap bir flex ya da grid kapsayıcısındaki öğeler arasında boşluk bırakır, letter-spacing ve word-spacing metnin kendisine boşluk verir. Bir paragrafın ilk satırına girinti vermek için text-indent kullan; bu, metni ortalama sayfasında anlatılıyor.

Satır içi elementler arasındaki boşluk

Birleşmenin öbür yüzü: iki satır içi ya da inline-block element arasındaki boşluk yine de tek bir boşluk sayılır. Kaynağında iki butonun arasındaki bir satır sonu, aralarına küçük bir boşluk koyar:

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

İlk çiftte kaynaktaki satır sonundan gelen bir boşluk var. Bir flex kapsayıcısında öğeler arasındaki boşluk yok sayılır, bu yüzden ikinci çift birbirine değer. Boşluğu tam olarak kontrol etmek istediğinde flex ve gap kullan.

Sık yapılan hatalar

Yerleşim için   zincirleri. Yazı tipi ya da ekran boyutu değiştiği anda bozulurlar. margin, padding ya da gap kullan.
Fazladan boşluk yazıp görünmesini beklemek. Birleşirler.   ya da white-space: pre-wrap kullan.
&nbsp yazıp noktalı virgülü unutmak. Tarayıcılar genellikle kabul eder, ama geçersizdir ve bazı konumlarda çalışmaz. Her zaman ; ile bitir.
Satır kaymasını engellemek için her yerde   kullanmak. Uzun bir bölünmez metin telefonlarda taşar. Yalnızca bir arada kalması gerekenleri birleştir.
Paragraflara boşlukla girinti vermek. CSS'te text-indent kullan.

Sıkça Sorulan Sorular

HTML'de nasıl boşluk bırakılır?

Tek bir boşluk yazdığın gibi çalışır, ama fazladan boşluklar teke iner. Daha fazlası için her boşluk başına bir bölünmez boşluk entity'si   kullan: a   b. Yerleşimdeki boşluklar için ise CSS margin, padding ya da gap kullan.

HTML'de   ne anlama gelir?

  bölünmez bir boşluktur (non-breaking space). Normal bir boşluk gibi görünür, ama tarayıcı satırı asla onun yerinden bölmez ve onu asla birleştirmez; bu yüzden 10 km gibi kelimeleri bir arada tutar ve fazladan boşluk eklemeni sağlar.

HTML boşluklarımı neden yok sayıyor?

HTML boşlukları birleştirir: art arda gelen boşluklar, tab'lar ve satır sonları tek bir boşluk olarak gösterilir, satır başındaki ve sonundaki boşluklar da silinir. Korumak için  , <pre> ya da CSS white-space özelliğini kullan.

HTML'de tab boşluğu nasıl eklenir?

HTML'de önceden biçimlendirilmiş metin dışında görünen bir tab yoktur. <pre> içinde ya da white-space: pre olan bir elementte tab karakteri korunur ve CSS tab-size özelliği genişliğini belirler. Bir paragrafa girinti vermek için CSS'te text-indent ya da padding-inline-start kullan.

  ile &emsp; arasındaki fark nedir?

  normal bir boşluk kadar geniştir. &ensp; yarım em, &emsp; bir em genişliğindedir (yazı boyutu kadar). &ensp; ve &emsp; birleşmez, ama   boşluğunun aksine satır onların yerinden yine de bölünebilir.

İlgili kavramlar

HTML'de Boşluk:  , Birden Fazla Boşluk ve white-space