css-dolgusu-padding

CSS Dolgusu
CSS paddingözellikleri, herhangi bir sınırın içinde bir öğenin içeriği etrafında boşluk oluşturmak için kullanılır.
CSS, bir öğenin her bir yanına dolgu belirtmek için özelliklere sahiptir:
padding-top
padding-right
padding-bottom
padding-left
Tüm doldurma özellikleri aşağıdaki değerlere sahip olabilir:
uzunluk - px, pt, cm vb. cinsinden bir dolgu belirtir.
% - içeren elemanın genişliğinin yüzdesi olarak dolgu belirtir
inherit - dolgunun üst öğeden devralınacağını belirtir.
Not: Negatif değerlere izin verilmiyor.

Aşağıdaki örnek, bir <div> öğesinin dört kenarının tamamında farklı doldurma ayarlarını yapar:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Kodu kısaltmak için, tüm dolgu özelliklerini bir mülkte belirtmek mümkündür.
Eğer paddingözellik dört değer vardır:

padding: 25px 50px 75px 100px;
üst dolgu 25 pikseldir
sağ dolgu 50 pikseldir
alt dolgu 75 kat
sol dolgu 100 pikseldir.
div {
padding: 25px 50px 75px 100px;
}

Eğer paddingmülkiyet üç değer vardır:
padding: 25px 50px 75px;
üst dolgu 25 pikseldir
Sağ ve sol paddings 50 piksel
alt dolgu 75 kat
div {
padding: 25px 50px 75px;
}

Eğer paddingözellik iki değer vardır:
padding: 25px 50px;
üst ve alt paddingler 25 pikseldir
Sağ ve sol paddings 50 piksel
div {
padding: 25px 50px;
}

Eğer paddingözellik bir değeri vardır:
padding: 25 piksellik;
tüm dört padding 25 pikseldir
div {
padding: 25px;
}

Dolgu ve Eleman Genişliği
CSS widthözelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, dolgunun içindeki sınır, kenarlık ve bir elemanın kenar boşluğudur
div {
width: 300px;
padding: 25px;
}
Genişliği 300 piksele tutmak için dolgu miktarı ne olursa olsun box-sizingözelliği kullanabilirsiniz . Bu elemanın genişliğini korumasına neden olur; dolguyu arttırırsanız, mevcut içerik alanı azalacaktır.
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}