Altın Konu Web Geliştirme CSS Dolgusu(Padding)

Nizam-ı Alem · 28 Kas 2025

CSS Padding özelliği, öğenin içeriği ile öğenin kenarlığı arasında boşluk oluşturmak için kullanılır. Yalnızca öğenin içindeki içeriği etkiler.

CSS dolgusu, CSS kenar boşluğundan farklıdır çünkü kenar boşluğu, bitişik öğe kenarlıkları arasındaki boşluktur ve dolgu ise içerik ile öğenin kenarlığı arasındaki boşluktur.
Padding özelliklerini kullanarak üst, alt, sol ve sağ dolguyu bağımsız olarak değiştirebiliriz.
CSS, bir öğenin ayrı ayrı kenarları için dolgu belirtmek üzere aşağıdaki gibi tanımlanan özellikler sağlar:

padding-top: Öğenin üst tarafı için dolguyu ayarlar.
padding-right: Öğenin sağ tarafı için dolguyu ayarlar.
padding-bottom: Öğenin alt tarafı için dolguyu ayarlar.
padding-left: Öğenin sol tarafı için dolguyu ayarlar.
Padding özellikleri aşağıdaki dolgu değerlerine sahip olabilir:

Length - cm, px, pt vb. cinsinden.
Width - öğenin genişliğinin %'si.
inherit - üst öğeden dolguyu devral.
Örnek: div öğesinin her iki tarafına ayrı ayrı dolgu uyguladığımız padding özelliğini kullanarak örnek vermek gerekirse.

CSS:

<!DOCTYPE html>
<html>
<!--Turkmmo Web Geliştirme Padding Eğitimi-->
<head>
    <title>Turkmmo CSS Padding Örneği</title>

    <style>
        body {
            margin: 0;
            padding: 20px;
            width: 50%;
        }

        h2 {
            color: green;
        }

        .myDiv {
            background-color: lightblue;
            border: 2px solid black;

            /* Applying padding to each side individually */
            padding-top: 80px;
            padding-right: 100px;
            padding-bottom: 50px;
            padding-left: 80px;
        }

        .inner {
            background-color: pink;
            border: 2px solid black;
            width: 70px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="myDiv">
        <div class="inner">Tukrmmo Pad_Box</div>
    </div>
</body>

</html>

Sözdizimi:

/* Applying padding to each side individually */
.myDiv
{ padding-top: 80px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 80px;
}

CSS'de Dolgu için Kısaltma Özelliği
CSS'deki Kısaltma Özelliği, bir öğenin tüm kenarlarına (üst, sağ, alt, sol) dolguyu tek bir satırda, bazı kombinasyonlarla ayarlamanıza olanak tanır, böylece hedef öğemize kolayca dolgu uygulayabiliriz.

Kısaltma özelliğinin kullanımında dört durum vardır:

Padding özelliğinin tek bir değeri varsa.
Padding özelliğinin iki değer içermesi durumunda.
Padding özelliğinin üç değer içermesi durumunda.
Padding özelliğinin dört değer içermesi durumunda.
Tek Değer İçin CSS Kısaltma Özelliği
Padding özelliğinin tek bir değeri varsa, öğenin tüm kenarlarına dolgu uygular. Örneğin padding: 20px, tüm kenarlara eşit olarak 20 piksel dolgu uygular.

Sözdizimi:

.element {
/* Applies 20px padding to all sides */
padding: 20px;
}

Örnek: Div öğesinin tüm kenarlarına 20px dolgu uygulanmasını göstermek.

CSS:

<!DOCTYPE html>
<html>
<!--Turkmmo Web Geliştirme Padding Eğitimi-->
<head>
    <title>Dolgu Özelliğinin Bir Değeri Vardır</title>
    <style>
        body {
            margin: 0;
            padding: 20px;

        }

        h2 {
            color: green;
        }

        .myDiv {
            background-color: gray;
            border: 2px solid black;
            text-align: center;
            width: 40%;

            /* Applies 10px padding to all sides */
            padding: 20px;
        }

        .inner {
            height: 70px;
            width: 70px;
            background-color: pink;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="myDiv">
        <div class="inner">Turkmmo Padding Örnek</div>
    </div>
</body>

</html>

İki Değer İçin Dolgu Özelliği
Dolgu özelliği iki değer içeriyorsa, ilk değer üst ve alt dolguya, ikinci değer ise sağ ve sol dolguya uygulanır. Örneğin - dolgu: 10px 20px, yani üst ve alt dolgu 10px, sağ ve sol dolgu ise 20px'tir.

.element {
/* Applies 10px padding to top and bottom,
20px padding to right and left */
padding: 10px 20px;
}

Örnek: İki değerli bir dolgu özelliğinin kullanımını göstermek için.

CSS:

<!DOCTYPE html>
<html>
<!--Turkmmo Web Geliştirme Padding Eğitimi-->
<head>
    <title>Dolgu Özelliği İki Değer İçerir</title>

    <style>
        body {
            margin: 0;
            padding: 20px;

        }

        h2 {
            color: green;
        }

        .myDiv {
            background-color: gray;
            border: 2px solid black;
            text-align: center;
            width: 40%;

            padding: 10px 20px;
            /* Applies 10px padding to top and bottom,
               20px padding to right and left */
        }

        .inner {
            height: 70px;
            width: 70px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="myDiv">
        <div class="inner">Turkmmo Web Geliştirme Box</div>
    </div>
</body>

</html>

Üç Değer İçin Dolgu Özelliği
Dolgu özelliği üç değer içeriyorsa, ilk değer üst dolguyu, ikinci değer sağ ve sol dolguyu ve üçüncü değer alt dolguyu ayarlar.

Örneğin - dolgu: 10px 20px 30px;

üst dolgu 10px'tir.
sağ ve sol dolgu 20px'tir.
alt dolgu 30px'tir.
Sözdizimi:

.element {
/* Applies 10px padding to top,
20px padding to right and left,
30px padding to bottom */
padding: 10px 20px 30px;
}

CSS:

<!DOCTYPE html>
<html>
<!--Turkmmo Web Geliştirme Padding Eğitimi-->
<head>
    <title>Dolgu Özelliği Üç Değer İçerir</title>

    <style>
        body {
            margin: 0;
            padding: 20px;

        }

        h2 {
            color: green;
        }

        .myDiv {
            background-color: yellowgreen;
            border: 2px solid black;
            text-align: center;
            width: 40%;

            padding: 10px 20px 30px;
            /* Applies 10px padding to top,
               20px padding to right and left,
               30px padding to bottom */
        }

        .inner {
            height: 70px;
            width: 70px;
            background-color: grey;
        }
    </style>
</head>

<body>
    <div class="myDiv">
        <div class="inner">Box</div>
    </div>
</body>

</html>

Örnek: Bu örnekte üç değerli dolgu kullanıyoruz.

Dört Değerli Dolgu Özelliği
Dolgu özelliği dört değer içeriyorsa, ilk değer üst dolguyu, ikinci değer sağ dolguyu, üçüncü değer alt dolguyu ve dördüncü değer sol dolguyu ayarlar.:

Örneğin - dolgu: 10px 20px 15px 25px;

üst dolgu 10px
sağ dolgu 5px
alt dolgu 15px
sol dolgu 20px

Sözdizimi:

.element {
/* Applies 10px padding to top,
20px padding to right,
15px padding to bottom,
and 25px padding to left */
padding: 10px 20px 15px 25px;
}

Örnek: Dört değerli bir dolgu özelliğinin kullanımını göstermek için.

CSS:

<!DOCTYPE html>
<html>
<!--Turkmmo Web Geliştirme Padding Eğitimi-->
<head>
    <title>Padding Property Contains Four Values</title>
    <style>
        body {
            margin: 0;
            padding: 20px;

        }

        h2 {
            color: green;
        }

        .myDiv {
            background-color: cyan;
            border: 2px solid black;
            text-align: center;
            width: 40%;

            padding: 10px 20px 15px 25px;
            /* Applies 10px padding to top,
               20px padding to right,
               15px padding to bottom,
               and 25px padding to left */

        }

        .inner {
            height: 70px;
            width: 70px;
            background-color: black;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="myDiv">
        <div class="inner">Box</div>
    </div>
</body>

</html>