HTML CSS Kelimeler Arasında Boşluk Yapma

HTML’de metin öğeleri ile çalışırken metinlerde çeşitli düzenlemelere ihtiyaç duyarız. CSS metinler üzerinde renk, arkaplan, boşluk vb. bir çok değişikliği yapmamıza izin vermektedir.

Bu yazıda CSS ile bir yazının kelimeleri arasında nasıl boşluk bırakacağınızı göstereceğim.

İlk olarak kelimeler arasında boşluk bırakmak için word-spacing özelliğinin kullanıldığını ve boşluk değerinin negatif yada pozitif olabileceğini belirtelim.

Aşağıdaki örnek HTML CSS kodu +/- olarak kelimeler arasında nasıl boşluk bırakacağını göstermektedir.


<!DOCTYPE html>
<html>
<head>
<style>
    h1 {
        word-spacing: 20px;
    }

    h2 {
       word-spacing: 10px;
    }

    h3 {
        word-spacing: -10px;
    }
</style>
</head>
<body>

    <h1>Merhaba Dünya, Yazılım Kodlama</h1>
    <h2>Merhaba Dünya, Yazılım Kodlama</h2>
    <h3>Merhaba Dünya, Yazılım Kodlama</h3>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

word-spacing: 20px;

}

h2 {

word-spacing: 10px;

}

h3 {

word-spacing: -10px;

}

</style>

</head>

<body>

<h1>Merhaba Dünya, Yazılım Kodlama</h1>

<h2>Merhaba Dünya, Yazılım Kodlama</h2>

<h3>Merhaba Dünya, Yazılım Kodlama</h3>

</body>

</html>

h1 ve h2 etiketlerinin boşlukları pozitif olduğu için yazılan sayılar oranında boşluk bırakmıştır. h3 etiketinin boşluğu negatif olduğu için yazılan sayı oranında bitiştirilmiştir.

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin