Web tasarımı ve programcılığına yeni başlayan herkesin başına gelen tanıdık bir sorun olmuştur. Kodlama yaparken editörde yazılar arasında birden fazla boşluk bırakılmasına rağmen tasarım yada görüntülemede her hangi bir değişiklik olmaz. HTML işaretleme dili olduğu için herşeyin (boluk dahil) kod ile belirtilmesi gerekiyor.
Sorunun kaynağı HTML’nin tüm boşluk karakterlerini – sekmeler, boşluklar ve satırbaşları – bir karaktere sıkıştırmasıdır. Paragraflarınızı girintilemek istiyorsanız, yalnızca beş boşluk yazıp ardından metne başlayamazsınız. Bununla birlikte, HTML’nizdeki boşluklar üzerinde hiçbir kontrolünüz olmadığı anlamına gelmez.
Bir karakterlik Boşluk Bırakma Kodu
Bir karaterden sonraki boşluklar için boşluk bırakma kodunu eklemelisiniz. Bir karakterlik boşluk bırakma kodunu yan yana istediğiniz kadar ekleyerek boşluklar bırakabilirsiniz. Aşağıdaki örnekte “merhaba” metni harfleri arasında birden fazla boşluklar bırakılmıştır.
Kod:
|
1 2 3 |
|
Örnek:
|
1 2 3 |
<p>a b c</p> |
Çıktı:
|
1 2 3 |
a b c |
Varolmayan HTML Boşluk Etiketine Alternatifler
<br>: HTML <br> etiketi, bir kelime işlemci programındaki satır başı gibi, satır sonunu gösterir. Örneğin, bir adresin her satırının sonunda, örneğin insanların görmeye alıştıkları blok biçimini almak için kullanırsınız.
<p>: HTML <p> etiketi bir paragraf sonu oluşturur. Yakındaki bir metin bloğundan bir boşluk ve / veya birinci satır girintisi ile ayrılmış bir metin bloğu olan bir metin bölümüne uygulanır.
<pre>: HTML <pre> etiketi, önceden biçimlendirilmiş metinlerle birlikte kullanılır. Tarayıcıya, herhangi bir boşluk veya boş satır da dahil olmak üzere metnin tam olarak HTML dosyasına yazıldığı gibi görünmesini bildirir. <Pre> etiketlerinin içine beş boşluk yazarsanız, website.character’da beş boşluk bulunur
: yeni bir satıra girmeyen bir boşluk yaratır. Bölünmez bir boşlukla ayrılan iki kelime her zaman aynı satırda görünür.
	 ve &tab; : HTML’de sekme boşlukları oluşturur. Ne yazık ki, bağımsız olarak kullanılamazlar. HTML’de bir sekme istediğinizde, <pre> etiketlerinin içinde bu karakterlerden birini kullanmanız veya CSS ile manipüle etmeniz gerekir.
CSS ile Kelimeler ve Karakterler Arasında Boşluk Bırakma
Eğer her kelime yada karakter arasında boşluk bırakmak istiyorsanız. Yukarıdakiler yerine CSS kullanmanız çok daha uygun olacaktır.
letter-spacing: Harfler arasında boşluk bırakmak için letter-spacing özelliğini kullanabilirsiniz.
word-spacing: Harfler yerine kelimeler arasında boşluk bırakmak isterseniz word-spacing kullanmanız gerekecektir.
line-height: Satırlar arasındaki boşluğu değiştirmek istiyorsanız line-height özelliğini kullanabilirsiniz.
Örnek: Satır yüksekliğini değiştirme
|
1 2 3 4 5 6 7 8 |
<p style="line-height:50px;"> Korkma, sönmez bu şafaklarda yüzen al sancak;<br> Sönmeden yurdumun üstünde tüten en son ocak.<br> O benim milletimin yıldızıdır, parlayacak;<br> O benimdir, o benim milletimindir ancak. </p> |
Çıktı:
Örnek: Harfler arasındaki boşluğu değiştirme
|
1 2 3 4 5 6 7 8 |
<p style="letter-spacing:5px"> Korkma, sönmez bu şafaklarda yüzen al sancak;<br> Sönmeden yurdumun üstünde tüten en son ocak.<br> O benim milletimin yıldızıdır, parlayacak;<br> O benimdir, o benim milletimindir ancak. </p> |
Çıktı:
Örnek: Kelimeler arasındaki boşluğu değiştirme
|
1 2 3 4 5 6 7 8 |
<p style="word-spacing:20px;"> Korkma, sönmez bu şafaklarda yüzen al sancak;<br> Sönmeden yurdumun üstünde tüten en son ocak.<br> O benim milletimin yıldızıdır, parlayacak;<br> O benimdir, o benim milletimindir ancak. </p> |
Çıktı:
Bu yazıda HTML ile çeşitli boşluk bırakma yöntemlerini gördünüz. Bunlar karakterler arasında boşluk bırakılabileceği gibi yatay olarak satırlar arasında da boşluk bırakabilmek anlamına geliyor.
