Altın Konu Web Geliştirme CSS Kenar Boşlukları

Nizam-ı Alem · 28 Kas 2025

CSS kenar boşlukları, bir öğenin kenarlığının dışında boşluk oluşturarak onu web sayfasındaki diğer öğelerden ayırmak için kullanılır. Sayfa düzenini şekillendirmeye yardımcı olur ve içeriklerin birbirine çok yakın görünmesini engeller.

Öğelerin etrafındaki dış boşlukları kontrol edin.
Tüm kenarlar için veya ayrı ayrı (üst, sağ, alt, sol) ayarlanabilir.

CSS:

<html>
<head>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
    <style>
        .box {
            margin: 20px ;
        }
    </style>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
    <div class="box">
        Bu kutunun dikey kenar boşluğu 20px'tir.
    </div>
</body>
</html>

kenar boşluğu (margin): 20 piksel; öğenin dört kenarına da 20 piksellik bir kenar boşluğu uygular.

Sözdizimi (Syntax):

body { margin: value;}

Kenar Boşluğu Değerleri Türleri
Piksel (px): En yaygın birim, sabit bir piksel sayısını belirtir.
Yüzde (%): Kenar boşluğu, içeren öğenin genişliğinin (yatay kenar boşlukları için) veya yüksekliğinin (dikey kenar boşlukları için) yüzdesi olarak hesaplanır.
Diğer birimler: em, rem, vh ve vw gibi daha az yaygın birimler de göreli boyutlandırma için kullanılabilir.
Otomatik: Tarayıcı, genellikle öğeleri ortalamak için kullanılan uygun bir kenar boşluğu boyutu hesaplar.
Not: Kenar boşlukları için negatif değerler de kullanabiliriz.

Margin Özellikleri Değerleri

İşte farklı değerlere sahip kenar boşluğu özelliğinin örnekleri:

4 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği dört değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ kenar boşluğunu, üçüncü değer alt kenar boşluğunu ve dördüncü değer sol kenar boşluğunu ayarlar.

kenar boşluğu: 40 piksel 100 piksel 120 piksel 80 piksel;

üst kenar boşluğu(top margin) = 40 piksel
sağ kenar boşluğu(right margin) = 100 piksel
alt kenar boşluğu(bottom margin) = 120 piksel
sol kenar boşluğu(left margin) = 80 piksel

CSS:

<html>
<head>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
    <style>
        p {
            margin: 40px 100px 120px 80px;
        }
    </style>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
    <p>Turkmmo margin Özellikleri </p>
</body>

</html>

3 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği üç değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ ve sol kenar boşluğunu ve üçüncü değer alt kenar boşluğunu ayarlar.

kenar boşluğu: 40 piksel 100 piksel 120 piksel;

üst = 40 piksel
sağ ve sol = 100 piksel
alt = 120 piksel

CSS:

<html>
<head>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
    <style>
        p {
            margin: 40px 100px 120px;
        }
    </style>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
    <p>
        Turkmmo Web Geliştirme Css Margin Özellikleri
    </p>
</body>
</html>

2 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği iki değer içeriyorsa, ilk değer üst ve alt kenar boşluğuna, ikinci değer ise sağ ve sol kenar boşluğuna uygulanır.

kenar boşluğu: 40 piksel 100 piksel;

üst ve alt = 40 piksel;
sol ve sağ = 100 piksel;

CSS:

<html>
<head>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
    <style>
        p {
            margin: 40px 100px;
        }
    </style>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
    <p>
        Turkmmo Web Geliştirme css Margin Özellikleri
    </p>
</body>
</html>

1 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği tek bir değere sahipse, bir öğenin tüm kenarlarına dolgu uygular.

kenar boşluğu: 40 piksel;

üst, sağ, alt ve sol = 40 piksel

CSS:

<html>
<head>

    <style>
        p {
            margin: 40px;
        }
    </style>
</head>
<body>
    <p>
        Turkmmo Web Geliştirme CSS Margin Özellikleri
    </p>
</body>
</html>

Margin örneği: otomatik özellik
margin: otomatik;

CSS:

<html>
<head>
//Turkmmo Web Geliştirme Css Eğitimi
    <style>
        div {
            margin: auto;
            width: 50%;
            border: 1px solid black;
            text-align: center;
        }
    </style>
//Turkmmo Web Geliştirme Css Eğitimi
</head>
<body>
    <div> //Turkmmo Web Geliştirme Css Eğitimi margin oto mantığı </div>
</body>
</html>

margin: auto;: Öğeyi yatay olarak ortalamak için sol ve sağ kenar boşluklarını otomatik olarak ayarlar.
Elemanın margin: auto; işlevinin etkili bir şekilde çalışması için tanımlanmış bir genişliğe sahip olması gerekir.
margin: inherit; Özellik örneği

CSS:

<html>
<head>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
    <style>
        .parent {
            margin: 20px;
        }
        .child {
            margin: inherit;
            border: 1px solid black;
        }
    </style>
<!--Turkmmo Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
    <div class="parent">
        Üst Öge
        <div class="child"> Turkmmo Web Geliştirme CSS Parent eğitimi </div>
    </div>
</body>
</html>

kenar boşluğu: miras;: Alt öğe, üst öğesinin kenar boşluğu değerini devralır.
Bu örnekte, alt öğenin kenar boşluğu, üst öğenin kenar boşluğuyla eşleşen 20 piksel olarak ayarlanmıştır.