CSS Padding

padding yani dolgu, bir öğenin içeriğinin etrafında, tanımlanmış sınırların içinde boşluk oluşturmak için kullanılır.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>
 
<div>70px dolgu oluşturma örneği.</div>

</body>
</html>


CSS padding özellikleri, bir öğenin içeriğinin etrafında, tanımlanmış herhangi bir kenarlığın içinde boşluk oluşturmak için kullanılır. CSS ile padding üzerinde tam kontrol sağlamak mümkündür. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) dolguyu ayarlamak mümkündür.

CSS, bir öğenin her bir tarafı için dolguyu belirlemeye yönelik özelliklere sahiptir:

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

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

  • length – px pt ve cm cinsinden değer
  • % – % cinsinden değer
  • inherit – padding değerini ana ögeden alır

Not: Negatif değerlere izin verilmez.

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>
 
<div>70px dolgu oluşturma örneği.</div>

</body>
</html>

Padding Değerleri Kısa Gösterme

Kodu kısaltmak için tüm dolgu özelliklerini tek bir özellikte belirtmek mümkündür.

padding özelliği, aşağıdaki bireysel padding özellikleri için kısa bir özelliktir:

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

Padding özelliğinin dört değeri varsa:

padding: 25px 50px 75px 100px;

üst dolgu 25 px
sağ dolgu 50 px
alt dolgu 75 px
sol dolgu 100 px

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>
 

<div>div etiketi üst padding 25px, sağ padding 50px, alt padding 75px, sol padding 100px.</div>

</body>
</html>

Padding özelliğinin 3 değeri varsa:

padding: 25px 50px 75px;

üst dolgu 25 pikseldir
sağ ve sol dolgular 50 pikseldir
alt dolgu 75 pikseldir

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>
 

<div>div etiketi üst padding 25px, sağ -sol padding 50px, alt padding 75px, .</div>

</body>
</html>

Padding özelliğinin 2 değeri varsa:

padding: 25px 50px;

üst ve alt dolgular 25 px
sağ ve sol dolgular 50 px

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>
  
<div>Bu div öğesinin üst ve alt dolgusu 25px, sağ ve sol dolgusu ise 50px.</div>

</body>
</html>

Padding özelliğinin 1 değeri varsa:

padding: 25px;

dört dolgunun tümü 25 px

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>
  
<div>Bu div öğesinin bütün dolguları 25px.</div>

</body>
</html>

Dolgu ve Eleman Genişliği

CSS width özelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir öğenin (kutu modeli) dolgusunun, kenarlığının ve kenar boşluğunun içindeki kısımdır.

Dolayısıyla, bir öğenin belirli bir genişliği varsa, o öğeye eklenen dolgu, öğenin toplam genişliğine eklenecektir. Bu çoğu zaman istenmeyen bir sonuçtur.

Burada <div> elemanına 300px genişlik verilmiştir. Bununla birlikte, <div> öğesinin gerçek genişliği 350 piksel olacaktır (300 piksel + 25 piksel sol dolgu + 25 piksel sağ dolgu):

<!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">300px genişliğinde div.</div>
<br>

<div class="ex2">bu div 300 px boyutunda. Ancak 25px padding verilmiş ve dolgu yapılmıştır.</div>

</body>
</html>

Dolgu miktarı ne olursa olsun genişliği 300 pikselde tutmak için box-sizing özelliğini kullanabilirsiniz. Bu, öğenin gerçek genişliğini korumasına neden olur; dolguyu artırırsanız kullanılabilir içerik alanı azalacaktır.

<!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">300px genişliğinde div.</div>
<br>

<div class="ex2">bu div 300 px boyutunda. Ancak 25px padding verilmiş ve dolgu yapılmıştır.</div>

</body>
</html>

14 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir