CSS Padding Özellikleri Nelerdir ve Nasıl Uygulanırlar?
CSS padding özellikleri (kenar içi boşluk) içerik alanı ile kenar çizgisi arasındaki oluşturulmak istenen boşluklar için uygulanır.
Üst Kenar İçi Boşluğu (padding-top)
Yapısı: padding-top: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Yok
padding-top özelliği içerik alanı ile üst kenar çizgisi arasındaki mesafeyi belirler.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2 {
padding-top: 0.25in;
background-color:#999;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Internet Explorer 5.5 ve alt sürümlerinde (Internet Explorer 6 ve 7 garip mod dâhil) kenar içi boşluğu (padding) değerlerini içerik alanı genişliğinden sayar.
Internet Explorer 6 ve alt sürümlerinde satır içi elemanların dikey yükseklik değerini tam olarak göstermesi için position:relative değeri eklenir.
Sağ Kenar İçi Boşluğu (padding-right )
Yapısı: padding-right: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
padding-right özelliği içerik alanı ile sağ kenar çizgisi arasındaki mesafeyi belirler.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2 {
padding-right: 0.25in;
background-color:#999;
float:left;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Internet Explorer 5.5 ve alt sürümlerinde (Internet Explorer 6 ve 7 garip mod dâhil) kenar içi boşluğu (padding) değerlerini içerik alanı genişliğinden sayar.
Firefox 2.0.0.7 ve önceki sürümlerinde iki satıra uzamış satır içi elemanlara uygulanan padding-right degeri sorun çıkarır. Önceki satır ve mevcut satırın her ikisine de padding uygulanır.
Alt Kenar İçi Boşluğu (padding-bottom)
Yapısı: padding-bottom: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
padding-bottom özelliği içerik alanı ile alt kenar çizgisi arasındaki mesafeyi belirler.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2 {
padding-bottom: 0.25in;
background-color: #999;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Internet Explorer 5.5 ve alt sürümlerinde (Internet Explorer 6 ve 7 garip mod dâhil) kenar içi boşluğu (padding) değerlerini içerik alanı genişliğinden sayar.
Internet Explorer 6 ve alt sürümlerinde satır içi elemanların dikey yükseklik değerini tam olarak göstermesi için position:relative değeri eklenir.
Sol Kenar İçi Boşluğu (padding-left)
Yapısı: padding-left: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde> | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
padding-left özelliği içerik alanı ile sol kenar çizgisi arasındaki mesafeyi belirler.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2 {
padding-left: 0.25in;
background-color: #999;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Internet Explorer 5.5 ve alt sürümlerinde (Internet Explorer 6 ve 7 garip mod dâhil) kenar içi boşluğu (padding) değerlerini içerik alanı genişliğinden sayar.
Kenar İçi Boşluğu (padding)
Yapısı: padding: <deger>
Aldığı Değerler: <uzunluk degeri> | <yüzde>{1,4} | inherit
Başlangıç Değeri: 0
Uygulanabilen elemanlar: Blok seviyeli ve yerleştirilen elemanlar
Kalıtsallık: Yok
padding özelliği padding-top, padding-right, padding-bottom ve paddingleft değerlerini kısa yoldan atamak için kullanılır.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Kutu Modeli Özellikleri</title>
<style type="text/css">
h2 {
padding: 10px;
background-color: #999;
float:left;
}
</style>
</head>
<body>
<h2>Vestibulum felis.</h2>
<p>Maecenas pulvinar, ante convallis pellentesque tristique, felis odio
commodo metus, id euismod pede quam sit amet ligula. Curabitur sit
amet tellus. Suspendisse potenti.</p>
<p class="diger">Quisque volutpat. Curabitur feugiat, sapien a laoreet
mollis, leo sapien pellentesque nisi, sed vehicula sapien orci eget libero.
Fusce neque nibh, tempor tristique, ullamcorper a, mollis vel, pede.
Praesent mattis bibendum massa. Curabitur ultricies fringilla nulla.
Aliquam in risus. </p>
</body>
</html>
Kenar dışı boşluğunda (margin) gibi farklı kullanım şekilleri mevcuttur.
Internet Explorer 5.5 ve alt sürümlerinde (Internet Explorer 6 ve 7 garip mod dâhil) kenar içi boşluğu (padding) değerlerini içerik alanı genişliğinden sayar.
Internet Explorer 6 ve alt sürümlerinde satır içi elemanların dikey yükseklik değerini tam olarak göstermesi için position:relative değeri eklenir.
CSS padding özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
