Kılavuz: Web Geliştirme CSS Dolgu Yöntemi (Açıklama: Web geliştirme sürecinde CSS dolgu (padding) yönteminin anlaşılmasını kolaylaştıran bir rehber...)

CSS Padding özelliği, bir elementin içerik alanı ile çevresel sınırı arasında boşluk oluşturmak için tasarlanmıştır, yalnızca elementin içerdiği verileri etkiler.

CSS dolgusu, aslında içerik ile MMOZirve ögelerinin kenarlığı arasındaki boşluk olarak tanımlanabilir, bu özelliği ile kenar boşluğundan ayrışıyor ve daha net bir boşluk oluşturuyor.
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>
<!--MMOZirve Web Geliştirme Padding Eğitimi-->
<head>
    <title>MMOZirve 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>
        <div>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>
<!--MMOZirve 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>
        <div>MMOZirve 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>
<!--MMOZirve 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>
        <div>MMOZirve 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>
<!--MMOZirve 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>
        <div>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>
<!--MMOZirve 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>
        <div>Box</div>
    </div>
</body>

</html>

Tüm CSS Dolgu Özellikleri
Bireysel yan özellikler ve kısaltma özellikleri birleştirildiğinde, toplam 5 CSS dolgu özelliği bulunur:

Kılavuz: Web Geliştirme CSS Dolgu Yöntemi (Açıklama: Web geliştirme sürecinde CSS dolgu (padding) yönteminin anlaşılmasını kolaylaştıran bir rehber...)

Kaynak Dosyası Yükle

Başlığı Düzenle

Ön Eki Değiştir

Başlık Rengi

Konuyu Taşı

Konu Sahibini Değiştir

Konuyu Düzenle

İçeriği Raporla