Padding

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 34 / 76.

CSS'de, padding bir öğenin içeriği ile kenarlığı arasındaki boşluktur. Padding, içeriğin etrafında görsel bir nefes alma alanı oluşturmak için kullanılır, bu da onu daha okunabilir ve görsel olarak çekici hale getirir. Bir öğenin dört tarafındaki (üst, sağ, alt ve sol) padding'i bağımsız olarak veya kısa yazım (shorthand) notasyonu kullanarak kontrol edebilirsiniz.

padding özelliğini kullanmak için temel sözdizimi şöyledir:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: Öğenin üst tarafındaki iç boşluk.
padding-right: Öğenin sağ tarafındaki iç boşluk.
padding-bottom: Öğenin alt tarafındaki iç boşluk.

padding-left: Elementin sol tarafındaki iç boşluk (padding).
value: İstenen iç boşluk değeri; pikseller (px), em'ler (em), yüzdeler (%) veya diğer geçerli CSS birimleri cinsinden belirtilebilir.

Dört tarafın dolgusunu da aynı anda ayarlamak için kısa yazım notasyonunu da kullanabilirsiniz, örneğin:

p {
    padding: 20px; /* Dört tarafın tamamına aynı dolguyu uygular */
}

div {
    padding: 10px 25px; /* Üst ve alt dolguyu 10px, sol ve sağ dolguyu 25px olarak ayarlar */
}

.button {
    padding: 15px 30px 10px 5px; /* Her bir taraf için dolguyu ayrı ayrı ayarlar */
}

Bu örnekte, tüm <p> (paragraf) öğeleri her taraftan 20px dolguya sahiptir, tüm <div> öğeleri 10px üst ve alt dolguya ve 25px sol ve sağ dolguya sahiptir ve button sınıfına sahip tüm öğeler 15px üst dolguya, 30px sağ dolguya, 10px alt dolguya ve 5px sol dolguya sahiptir.

Görev

Kolay

İki başlık içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğelerin içeriğinin etrafına boşluk eklemek için padding özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. padding değerini her yönden 20px olarak ayarlayın.
<h2> öğesini hedefleyen bir CSS kuralı yazın. Üst ve alt padding değerini 10px, sol ve sağ padding değerini ise 30px olarak ayarlayın.

Kopya kağıdı

CSS padding (iç boşluk), bir öğenin içeriği ile kenarlığı arasında boşluk oluşturur.

Bireysel iç boşluk özellikleri:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

Kısa yazım (shorthand) gösterimi:

/* Tüm kenarlarda aynı iç boşluk */
padding: 20px;

/* Üst/alt: 10px, Sol/sağ: 25px */
padding: 10px 25px;

/* Sırasıyla Üst, Sağ, Alt, Sol */
padding: 15px 30px 10px 5px;

Değerler piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilebilir.

Kendin dene

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>