Altın Konu Web Geliştirme CSS boşluk Özelliği (White-Space Property)

Nizam-ı Alem · 28 Kas 2025

CSS'deki boşluk özelliği, öğeler içindeki metin kaydırma ve boşluk yönetimini kontrol etmek için kullanılır. Geliştiricilerin, bir öğe içindeki boşlukların nasıl yönetileceğini belirlemelerine olanak tanır ve bu da içeriğin düzenini ve okunabilirliğini etkiler. Farklı efektler elde etmek için bu özellik ile çeşitli değerler kullanılabilir.

Sözdizimi

boşluk : normal | nowrap | ön | ön-satır | ön-sarma | kesme-boşlukları | başlangıç | devralma;

Özellik Değerleri:
Beyaz boşluk özelliği için her bir özellik değerinin kısa bir açıklaması aşağıdadır:

CSS boşluk özelliği örnekleri
Her bir değeri daha iyi anlamanıza yardımcı olacak ayrıntılı örnekler ve kodlar aşağıdadır:

1. Değeri normal olarak ayarlama
Normal değer, boşluk özelliği için varsayılan ayardır. Ardışık boşlukları tek bir boşluğa indirger ve gerektiğinde metnin kaydırılmasına olanak tanır.

Etki: Boşluklar daraltılır ve gerektiğinde metin bir sonraki satıra kaydırılır.
Sözdizimi: boşluk: normal;

Örnek: Bu örnek, özellik değeri normal olarak ayarlanmış boşluk özelliğinin kullanımını göstermektedir.

CSS:

<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 500px;
            height: 500px;
            white-space: normal;
            background-color: limegreen;
            color: white;
            font-size: 80px;
        }
    </style>
</head>

<body>
    <div> Turkmmo:
        <br> Web Geliştirme Css Eğitimi
    </div>

</body>

</html>

2. Değer Ayarı nowrap
Nowrap değeri, kapsayıcıdan taşsa bile metnin bir sonraki satıra kaydırılmasını engeller. Ardışık boşluklar yine de tek bir boşluğa daraltılır.

Etki: Boşlukları daraltır ve tüm metni tek bir satırda tutarak satır sonlarını önler.
Sözdizimi: white-space: nowrap;

Örnek: Bu örnek, özellik değeri nowrap olarak ayarlanmış white-space özelliğinin kullanımını göstermektedir.

CSS:

<!DOCTYPE html>
<html>

<head>
    <title> CSS white-space Property </title>
    <style>
        div {
            width: 300px;
            height: 300px;
            white-space: nowrap;
            background-color: lightgreen;
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <div>Turkmmo:
        Web Gelistirme CSS Egitimi.
    </div>

</body>

</html>

3. Değer Ayarı pre
pre değeri, tüm boşlukları ve satır sonlarını kaynak kodda göründükleri gibi korur. Metin kaydırılmaz ve <pre> HTML etiketinin davranışını taklit ederek yazıldığı gibi görüntülenir.

Etki: Boşlukları ve satır sonlarını, metni kaydırmadan kaynak koddaki gibi korur.
Sözdizimi: white-space: pre;

Örnek: Bu örnek, özellik değeri pre olarak ayarlanmış white-space özelliğinin kullanımını göstermektedir.

CSS:

<!DOCTYPE html>
<html>

<head>
    <title> CSS bosluk özelligi </title>
    <style>
        div {
            width: 300px;
            height: 300px;
            white-space: pre;
            background-color: lightgreen;
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <div>
        Turkmmo Web Gelistirme CSS Egitimi
    </div>
</body>

</html>

4. Satır Öncesi Değer Ayarlama
Satır öncesi değeri, birden fazla boşluğu tek bir boşluğa daraltır, satır sonlarını korur ve gerektiğinde metnin kapsayıcı içinde kaydırılmasına olanak tanır.

Etki: Ardışık boşlukları tek bir boşluğa daraltır, satır sonlarını korur ve gerektiğinde metni kaydırır.
Sözdizimi: white-space: pre-line;

Örnek: Bu örnek, özellik değeri satır öncesi olarak ayarlanmış white-space özelliğinin kullanımını göstermektedir.

CSS:

<!DOCTYPE html>
<html>

<head>
    <title> CSS Bosluk Özelligi</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            white-space: pre-line;
            background-color: lightgreen;
            color: black;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <div>
        Turkmmo Web Gelistirme CSS Egitimi
    </div>

</body>

</html>

5. Değeri önceden sarma
Önceden sarma değeri, tüm boşlukları ve satır sonlarını korurken, metnin gerektiğinde kapsayıcı içinde sarılmasına da olanak tanır.

Etki: Boşlukları ve satır sonlarını korur ve gerektiğinde metni sarar.
Sözdizimi: white-space: pre-wrap;

Örnek: Bu örnek, özellik değeri önceden sarma olarak ayarlanmış white-space özelliğinin kullanımını göstermektedir.

CSS:

<!DOCTYPE html>
<html>
<head>
    <title> CSS bosluk özelligi </title>
    <style>
    div {
        width: 300px;
        height: 300px;
        white-space: pre-wrap;
        background-color: lightgreen;
        color: black;
        font-size: 25px;
    }
    </style>
</head>

<body>
    <center>
        <div>
            Turkmmo :    Web Gelistirme CSS Egitimi.
        </div>
    </center>
</body>
</html>

6. Değeri Ayarlama başlangıç
Başlangıç değeri, boşluk özelliğini CSS tarafından belirtilen varsayılan değerine sıfırlar. Özellik ayarlanmamış gibi davranır, genellikle boşluk: normal.

Etki: Boşluk özelliğini CSS spesifikasyonlarında tanımlanan varsayılan değerine geri döndürür.
Sözdizimi: boşluk: başlangıç;

Örnek: Bu örnekte boşluk özelliğini gösteriyoruz. .initial, boşluk: başlangıç; kullanırken .default, her <div> öğesindeki metin kaydırma ve boşluk işlemeyi etkileyen beyaz boşluk: normal; kullanır.

CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Boşluk Özelliği Örneği</title>
    <style>
        .initial {
            white-space: initial;
            border: 1px solid black;
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .default {
            white-space: normal;
            border: 1px solid blue;
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="initial">
        Bu div, başlangıçtaki boşluk değerine sahiptir.
Metin kaydırılacak ve boşluklar daraltılacaktır.
    </div>
    <div class="default">
        Bu div normal boşluk değerine sahiptir.
Metin kaydırılacak ve boşluklar daraltılacaktır.
    </div>
</body>

</html>

7. Değeri Ayarlama inherit
Inherit değeri, white-space özelliğini üst öğesiyle aynı değere ayarlar. Alt öğenin, üst öğesinin white-space davranışını benimsemesini sağlar.

Etki: White-space özelliği değerini üst öğeden devralır.
Sözdizimi: white-space: inherit;

Örnek: Bu örnekte white-space: inherit; özelliğini gösteriyoruz. Alt öğe <div>, white-space: pre-wrap; özelliğini üst öğesinden devralır ve sınırları içindeki boşlukları ve satır sonlarını korur.

CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Bosluk Özelligi Örnegi</title>
    <style>
        .parent {
            white-space: pre-wrap;
            border: 1px solid black;
            width: 300px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .child {
            white-space: inherit;
            border: 1px solid red;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="parent">
        Önceden sarmalanmış boşluk değerine sahip ana div.
        <div class="child">
            Alt div, boşluk değerini üst öğeden devralır.
Bu metin, boşlukları ve satır sonlarını korurken, metnin kapsayıcı içinde sarılmasına izin verir.
        </div>
    </div>
</body>

</html>

Desteklenen Tarayıcılar
White-space özelliğinin desteklediği tarayıcılar aşağıda listelenmiştir:

Google Chrome
Edge
Firefox
Opera
Safari
Not: White-space özelliği, modern tarayıcılarda evrensel olarak desteklenir ve farklı platformlarda metin ve boşlukların tutarlı bir şekilde işlenmesini sağlar. Tarayıcıya özgü ek geçici çözümlere gerek yoktur.