CSS Dolgusu

İçindekiler

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.

This element has a padding of 70px.

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  padding: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

CSS Dolgusu

CSS padding özellikleri etrafta boşluk oluşturmak için kullanılır Bir öğenin içeriği, tanımlanmış herhangi bir sınırın içindedir.

CSS ile dolgu üzerinde tam kontrole sahipsiniz. Özellikler var Bir öğenin her iki tarafının (üst, sağ, alt ve sol) dolgusunu ayarlamak için.

Dolgu - Bireysel Taraflar

CSS, her biri için dolguyu belirlemeye yönelik özelliklere sahiptir. bir elemanın tarafı:

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

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

uzunluk - px, pt, cm vb. cinsinden dolguyu belirtir.
% - içeren öğenin genişliğinin %'si cinsinden bir dolgu belirtir
inherit - dolgunun ana öğeden miras alınması gerektiğini belirtir

Not: Negatif değerlere izin verilmez.

Örnek

Bir <div> öğesinin dört tarafı için de farklı dolgular ayarlayın:

 div {	padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Kendiniz Deneyin →

<!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>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Dolgu - Steno Özelliği

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

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

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

İşte şu şekilde çalışıyor:

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

padding: 25px 50px 75px 100px;

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

Örnek

Padding shorthand özelliğini dört değerle kullanın:

 div {	  padding: 25px 50px 75px 100px;
}

Kendiniz Deneyin →

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

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

padding özelliğinin üç değeri varsa:

padding: 25px 50px 75px;

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

Örnek

Padding shorthand özelliğini üç değerle kullanın:

 div {	  padding: 25px 50px 75px;
}

Kendiniz Deneyin →

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

<h2>The padding shorthand property - 3 values</h2>

<div>This div element has a top padding of 25px, a right and left padding of 50px, and a bottom padding of 75px.</div>

</body>
</html>

padding özelliğinin iki değeri varsa:

padding: 25px 50px;

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

Örnek

padding shorthand özelliğini iki değerle kullanın:

 div {	  padding: 25px 50px;
}

Kendiniz Deneyin →

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

<h2>The padding shorthand property - 2 values</h2>

<div>This div element has a top and bottom padding of 25px, and a right and left padding of 50px.</div>

</body>
</html>

padding özelliğinin bir değeri varsa:

padding: 25px;

dört dolgunun tümü 25 pikseldir

Örnek

padding shorthand özelliğini tek bir değerle kullanın:

 div {	  padding: 25px;
}

Kendiniz Deneyin →

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

<h2>The padding shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right padding of 25px.</div>

</body>
</html>

Dolgu ve Eleman Genişliği

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

Dolayısıyla, eğer bir elemanın belirli bir genişliği varsa, o elemana eklenen dolgu elemanın toplam genişliğine eklenir. Bu çoğu zaman istenmeyen bir sonuçtur.

Örnek

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

 div {
  width: 300px;
  padding: 25px;
}

Kendiniz Deneyin →

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

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

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

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

Örnek

Genişliği 300 pikselde tutmak için box-sizing özelliğini kullanın. dolgu miktarı:

 div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Kendiniz Deneyin →

<!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>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

Daha fazla örnek

Sol dolguyu ayarlayın

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

Bu örnek, bir <p> öğesinin sol dolgusunun nasıl ayarlanacağını gösterir.

Doğru dolguyu ayarlayın

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>

Bu örnek, bir <p> öğesinin doğru dolgusunun nasıl ayarlanacağını gösterir.

Üst dolguyu ayarlayın

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>

Bu örnek, bir <p> öğesinin üst dolgusunun nasıl ayarlanacağını gösterir.

Alt dolguyu ayarlayın

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

Bu örnek, bir <p> öğesinin alt dolgusunun nasıl ayarlanacağını gösterir.

Tüm CSS Dolgu Özellikleri

padding: Tüm dolgu özelliklerini tek bir bildirimde ayarlamak için kullanılan kısa bir özellik
padding-bottom: Bir öğenin alt dolgusunu ayarlar
padding-left: Bir öğenin sol dolgusunu ayarlar
padding-right: Bir öğenin doğru dolgusunu ayarlar
padding-top: Bir öğenin üst dolgusunu ayarlar