CSS Padding Kullanımı

CSS padding özellikleri, herhangi bir HTML öğesinin kenarları ile içeriği arasında kalan boşluğu oluşturmak için kullanılır. Bir öğenin her bir yanına ait(üst, sağ, alt ve sol) dolgusunu (padding) ayarlama özellikleri vardır.

Örnek;

Aşağıdaki örneğimizde <div> öğesinin dolgusu her yönden 70 piksel olarak belirlenmiş olup, 1 piksel yeşil kenar çizgisi ile sınırları gösterilmiştir.


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        display: inline-block;
        padding: 80px;
        border: 1px solid green;
    }
</style>
</head>
<body>

    <div>Bu div elementinin içeriği ile kenarları arasında 70px iç boşluk vardır.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

display: inline-block;

padding: 80px;

border: 1px solid green;

}

</style>

</head>

<body>

<div>Bu div elementinin içeriği ile kenarları arasında 70px iç boşluk vardır.</div>

</body>

</html>

CSS padding kullanımında, bir öğenin her bir kenar tarafına ayrı ayrı iç boşluğu belirtmek için alt özelliklere de sahiptir;

padding-top
padding-right
padding-bottom
padding-left

Tüm padding özellikleri aşağıdaki değerlere sahip olabilir:

uzunluk – px, pt, cm vb. cinsinden bir dolgu belirtir.
% – içeren elemanın genişliğinin yüzdesi olarak dolgu belirtir
inherit – dolgunun üst öğeden devralınacağını belirtir.

Not: Negatif değerlere izin verilmiyor.

Aşağıdaki örnek, bir <div> öğesinin dört kenarının tamamında farklı doldurma ayarlarını yapar.


<!DOCTYPE html>
<html>
<head>
<style>
    div {
        border: 1px solid black;
        background-color: lightblue;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 60px;
        padding-left: 80px;
    }
</style>
</head>
<body>

    <div>Bu div öğesinin üstten 50px, sağdan 30px, alttan 60px, soldan 80px iç boşluğu bulunmaktadır.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 60px;

padding-left: 80px;

}

</style>

</head>

<body>

<div>Bu div öğesinin üstten 50px, sağdan 30px, alttan 60px, soldan 80px iç boşluğu bulunmaktadır.</div>

</body>

</html>

padding Özelliği

Kodu kısaltmak için bir padding özelliğinde tüm kenar iç boşluklarını belirlemek mümkündür.

padding özelliği sırayla aşağıdaki bireysel padding özellikleri için bir kestirme nitelik olarak kullanılmaktadır.

padding-top
padding-right
pading-bottom
padding-left

padding özelliğinin kullanımına bir bakalım;

Eğer padding özelliğine dört değer birden verilirse;


padding: 35px 50px 75px 100px;

padding: 35px 50px 75px 100px;

üst iç boşluğu 35 pikseldir
sağ iç boşluğu 50 pikseldir
alt iç boşluğu 75 pikseldir
sol iç boşluğu 100 pikseldir.

Eğer padding özelliğine üç değer verilirse;


padding: 25px 50px 75px;

padding: 25px 50px 75px;

üst iç boşluğu 25 pikseldir
sağ ve sol iç boşlukları 50 pikseldir
alt iç boşluğu 75 pikseldir

Eğer padding özelliğinde iki değer varsa;


padding: 25px 50px;

padding: 25px 50px;

üst ve alt iç boşlukları 25 pikseldir
sağ ve sol iç boşlukları 50 pikseldir

Eğer padding özelliği tek bir değer ise;


padding: 25px;

padding: 25px;

her yönden iç boşluğu da 25 pikseldir

padding ve width Özelliklerinin Birlikte Kullanımı
box-sizing Özelliği

CSS width özelliği, öğenin içerik alanı ve kenarlık değerlerinin toplamı kadar bir alanı ifade eder. Yani, bir öğe width ile belirtilen genişliğe sahipse, o öğeye eklenen padding, aynı zamanda öğenin toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur. Daha iyi anlamanıza yardımcı olabilmek için aşağıdaki örnekte, <div> öğesine 300 piksel genişlik verilmiştir. Bununla birlikte, <div> öğesinin gerçek oluşturulmuş genişliği 350 pik olacaktır (300px + 25px sol padding + 25px sağ padding)


<!DOCTYPE html>
<html>
<head>
<style>
    div.ex1 {
        width: 300px;
        background-color: yellow;
    }

    div.ex2 {
        width: 300px;
        padding: 25px;
        background-color: lightblue;
    }
</style>
</head>
<body>

    <div class="ex1">Bu div öğesi 300px genişlik değerine sahiptir.</div>
    <br>

    <div class="ex2">Bu div öğesi 300px genişliğinde olması gerekirken sol ve sağ padding değerleri neticesinde 350px olmuştur.</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

}

div.ex2 {

width: 300px;

padding: 25px;

background-color: lightblue;

}

</style>

</head>

<body>

<div class="ex1">Bu div öğesi 300px genişlik değerine sahiptir.</div>

<br>

<div class="ex2">Bu div öğesi 300px genişliğinde olması gerekirken sol ve sağ padding değerleri neticesinde 350px olmuştur.</div>

</body>

</html>

Görüldüğü üzere altta bulunan <div> öğesini her ne kadar width özelliği ile 300 piksel’de tutmak istesekte sol ve sağda yapılan 25 piksellik padding değerleri neticesinde 350 piksel genişliğe sahip olacaktır. Bu gibi istenmeyen durumları box-sizing özelliği kullanarak engellenebilir. box-sizing özelliği elemanın genişliğini korumasına neden olur; padding arttırırsanız, mevcut içerik alanı azalacaktır. Bir örnekle inceleyelim;


<!DOCTYPE html>
<html>
<head>
<style>
    div.ex1 {
        width: 300px;
        background-color: yellow;
    }

    div.ex2 {
        width: 300px;
        padding: 25px;
        box-sizing: border-box;
        background-color: lightblue;
    }
</style>
</head>
<body>

    <div class="ex1">Bu div öğesi 300px genişliğindedir.</div>
    <br>

    <div class="ex2">Bu div sol ve sağ padding değerleri 25 piksel eklenmiş olsada box-sizing ile genişliği 300px olarak korunmuştur.
    </div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

}

div.ex2 {

width: 300px;

padding: 25px;

box-sizing: border-box;

background-color: lightblue;

}

</style>

</head>

<body>

<div class="ex1">Bu div öğesi 300px genişliğindedir.</div>

<br>

<div class="ex2">Bu div sol ve sağ padding değerleri 25 piksel eklenmiş olsada box-sizing ile genişliği 300px olarak korunmuştur.

</div>

</body>

</html>

CSS Padding Kullanımı

padding Özelliği

padding ve width Özelliklerinin Birlikte Kullanımı
box-sizing Özelliği

İlgili

1 Yorum

Yorum Yap X

padding Özelliği

padding ve width Özelliklerinin Birlikte Kullanımı box-sizing Özelliği

Bunu paylaş:

İlgili

İlginizi Çekebilir

1 Yorum

Yorum Yap X

padding ve width Özelliklerinin Birlikte Kullanımı
box-sizing Özelliği