CSS padding Nedir? Nasıl Kullanılır?

Arkadaşlar bu yazımızda css padding nedir ve nasıl kullanacağımızı anlatacağız. Padding ingilizce anlamı dolgu malzemesi anlamandadır. Biz burada iç boşluk manasında kullanmamız daha uygun olacaktır. Padding, Html elemanın içerik ile border arasındaki kısma yani boşluğa denir.

Daha önceki css kutu modeli dersimizde ne olduğunu kısa bir değinmiştik. Bu yazımızda ayrıntılı bir şekilde örneklerle anlatacağız.

Kullanım şekli olarak hem yüzde cinsinden değer verilir hem de uzunluk birimleri (pixel, inç, mm vb…) cinsinden değer verilir.. Tek parametre, iki parametre, üç parametre ve dört parametre yazarak kullanılabilir. Tek parametre verildiğinde üst, sağ, alt ve sol tarafında aynı değerde iç boşluk bırakılır. İki parametre kullanıldığında ilk parametre üst ile alt, ikici parametre ise sağ ile sol kısmın değeridir. Üç parametre de ise ilk değer üst, ikinci değer sağ ile sol, üçüncü değer ise alttır. Dört parametre de ise ilk değer üst(top), ikinci değer sağ(right), üçüncü değer alt(bottom) ve dördüncü değer sol(left) kısmınadır. Parametre kullanım şekilleri aşağıdaki gibidir.

padding: 10px;              /*  top:right:bottom:left hepsine 10px */
padding: 20px 25px;         /*  top:bottom = 20px,  right:left = 25px */
padding: 10px 20px 15px;    /*  top:10px,  right:left = 25px, bottom = 15px */
padding: 5px 10px 15px 20px;/* top=5px,  right=10px, bottom=15px, left =20px */

Örnek yapalım:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            border: 2px solid blue;
            background-color: rgb(207, 205, 205);
        }
        div#bir {  padding: 10px;  }
        div#iki {  padding: 0;    }
    </style>
</head>
<body>
    <div id="bir"> CSS padding </div> <br>
    <div id="iki"> CSS padding </div>
</body>
</html>

Html Çıktısı:

css padding kullanımı

Örnek 1 de div elementlerinin genişliğine 200px verdiğimiz halde genişlikleri farklı oldu. Bunun sebebi verilen genişliğe border ve padding değerleri de eklenmesidir. Eğer div elementinin width (genişlik) özelliği değişmesini istemiyorsak “box-sizing:border-box;” demeliyiz.

Örnek 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{padding:100px}
        span {
            border: 2px solid;
            background-color: rgb(207, 205, 205); 
            box-sizing: border-box;      
        }
        span#bir {padding: 10px; border-color:blue; }
        span#iki {padding: 20px 30px; border-color:red;   }
        span#uc  {padding: 10px 30px 20px; border-color:green; }
        span#dort{padding: 10px 20px 30px 40px; border-color:yellow;   }
        span#bes {padding: 3%; border-color:blue; }      
    </style>
</head>
<body>
    <span id="bir">padding</span>
    <span id="iki">padding</span>
    <span id="uc">padding</span>
    <span id="dort">padding</span>
    <span id="bes">padding</span>
</body>
</html>

Html Çıktısı:

css padding kullanım şekilleri

Kullanım şekillerinde % cinsinden değer verirken tek parametre verdiğimiz gibi iki parametre, üç parametre ve dört parametre verilebilir.

CSS padding-top Kullanımı

Bazı durumlarda padding (iç boşluk) değerine sadece üstten (top) değer vermemiz gerekir. Bu durumda padding- top özelliğini kullanırız. border ile content(içerik) arasında üst( top ) kısmında iç boşluk ayarlanır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{padding:100px}
        span {
            border: 2px solid; 
            padding: 5px;   
        }
        span#bir {padding-top: 30px; border-color:blue; }
        span#iki {padding-top: 5%; border-color:red;   }
        span#uc  {padding-top: initial; border-color:green; }     
    </style>
</head>
<body>
    <span id="bir">padding-top</span>
    <span id="iki">padding-top</span>
    <span id="uc">padding-top</span>
</body>
</html>

Html Çıktısı:

top kullanımı

CSS padding-right Kullanımı

Bazı durumlarda padding (iç boşluk) değerine sadece sağdan(right) değer vermemiz gerekir. Bu durumda padding-right özelliğini kullanırız. border ile content(içerik) arasındaki sağ(right) kısmında iç boşluk ayarlanır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span { border: 2px solid; }
        span#bir {padding-right: 30px; border-color:blue; }
        span#iki {padding-right: 5%; border-color:red;   }
        span#uc  {padding-right: initial; border-color:green; }     
    </style>
</head>
<body>
    <span>padding-right</span>
    <span id="bir">padding-right</span>
    <span id="iki">padding-right</span>
    <span id="uc">padding-right</span>
</body>
</html>

Html Çıktısı:

right kullanımı

CSS padding-bottom Kullanımı

Bazı durumlarda padding (iç boşluk) değerine sadece alttan(bottom) değer vermemiz gerekir. Bu durumda padding-bottom özelliğini kullanırız. border ile content(içerik) arasında alt(bottom) kısmında iç boşluk ayarlanır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span { border: 2px solid; }
        span#bir {padding-bottom: 30px; border-color:blue; }
        span#iki {padding-bottom: 5%; border-color:red;   }
        span#uc  {padding-bottom: initial; border-color:green; }     
    </style>
</head>
<body>
    <span>padding-bottom</span>
    <span id="bir">padding-bottom</span>
    <span id="iki">padding-bottom</span>
    <span id="uc">padding-bottom</span>
</body>
</html>

Html Çıktısı:

padding-bottom kullanımı

CSS padding-left Kullanımı

Bazı durumlarda padding (iç boşluk) değerine sadece soldan(left) değer vermemiz gerekir. Bu durumda padding-left özelliğini kullanırız. border ile content(içerik) arasında sol(left) kısmında iç boşluk ayarlanır.

Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span { border: 2px solid; }
        span#bir {padding-left: 30px; border-color:blue; }
        span#iki {padding-left: 5%; border-color:red;   }
        span#uc  {padding-left: initial; border-color:green; }     
    </style>
</head>
<body>
    <span>padding-left</span>
    <span id="bir">padding-left</span>
    <span id="iki">padding-left</span>
    <span id="uc">padding-left</span>
</body>
</html>

Html Çıktısı:

left kullanımı

Bu özellikleri karışık bir şekilde kullanabiliriz. Örnek:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{padding:100px;}
        span {
            border: 2px solid red;
            padding-top: 20px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 15px; }
    </style>
</head>
<body>
    <span>padding kullanımı</span>
</body>
</html>

Bu yazımızda padding kullanımı öğrenmiş olduk. Başka bir yazımızda buluşmak üzere….

Leave a Reply