İç boşluk

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 34 / 76.

CSS'te 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, böylece içeriği daha okunabilir ve görsel olarak daha çekici hâle getirmek için kullanılır. Bir öğenin dört tarafındaki padding'i (üst, sağ, alt ve sol) bağımsız olarak veya kısa gösterim 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: Öğenin sol tarafındaki iç boşluk.
value: Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleriyle belirtilebilen istenen iç boşluk değeri.

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.

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>