HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css padding nedir
css padding kullanımı
css padding margin
css padding vs margin
css padding code
css padding class
css padding example
css in padding
css padding list
css padding ne işe yarar
css padding ne demek
css padding position
css padding style
css padding start
css padding select

CSS Padding(İç Boşluk)

CSS Padding(İç Boşluk)

Web sitenizin elemanları arasında nasıl boşluk bırakacağımızı bir önceki bölümde görmüştük. Bu bölümde ise elemanların kendi içlerinde nasıl boşluk bırakacağını göreceğiz. Bunu gerçek hayattan bir örnek ile açıklamak istiyorum. Böylece daha anlaşılır olacağına inanıyorum. Kendinizi evinizde bilgisayarın başında otururken hayal edinki muhtemelen zaten bu yazıyı bu durumda okuyorsunuz :). Siz bir elemansınız, bilgisayarda bir eleman, bulunduğunuz evde bir eleman. Sizin bilgisayar ile aranızda bir boşluk var. Bilgisayarla evin duvarları arasında bir boşluk var. Bu sayede dip dibe olmadan rahat bir şekilde konumlanıyorsunuz. Buna iç boşluk diyoruz.Sizin evin ise diğer evler yada sokaklar artık hangi elemanlar var ise onlar ile aralarında oluşturduğu boşluğa ise dış boşluk diyoruz. Böylece her eleman muntazam bir şekilde var olabiliyor. Bir örnekle çok iyi anlayacağınıza eminim.

1-Tek Satırda Kullanımı

Aynı örneği tek satırda da yapabiliriz. Sırasıyla üst, sağ, alt ve sol taraftan istediğiniz şekilde sırayı bozmadığınız sürece değer verebilirsiniz. Aşağıda gördüğünüz örnek ile yukarıda gördüğünüz örnek arasında hiçbir fark yoktur.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 50px 30px 50px 80px;
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üstten 50px, soldan 80px, alttan 50px, sağdan 30px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
p>
</body>
</html>

2-Üç Değerli Uzaklık

Bir diğer kısa kullanım şeklimiz. Üst, sağ-sol, alt şeklinde olan kullanımdır. Bunu sağ ve soldan eşit üst ve alttan farklı boşluk değerleri vermek istediğimizde kullanırız.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üstten 25px, sağdan ve soldan 50px, alttan 75px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>

3-İki Değerli Uzaklık

Üst ve alt için tek değer, sağ ve sol için tek değer vereceğimiz kullanım şeklidir.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Üst ve alt 25px, sol ve sağ 50px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>

4-Tek Değerli(Her yönden) Uzaklık

Elemana her yönden aynı uzaklıkta değer verdiğimiz kullanım şeklidir. Yani eleman her yönden içinde bulunduğu diğer elementlere karşı eşit uzaklıkta boşluğa sahip olacaktır.

Css
p.paragraf_kutusu { /*p etiketine bağlı paragraf_kutusu isimli sınıf*/
border: 1px solid black;
background-color: lightblue;
padding: 25px 50px 75px;/*üstten, sağ ve soldan, alttan*/
}
Html
<html>
<head>
</head>
<body>
<p class="paragraf_kutusu">
Bu bir paragraf yani bir web sitesi elemanı. Bu nedenle diğer elemanlardan ayrılmalı. Etraflarına yeterince boşluk değeri vermeliyiz.
Her yönden 25px boş bıraktık. Daha iyi anlamanız içinde paragraf kutumuza çizgi ekledik.
</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster