Style padding özelliği

Tanım ve Kullanım

padding Bu özellik, elemanın iç boşluklarını ayarlar veya döndürür.

Bu özellik bir ila dört değer alabilir:

margin özelliği ve padding özelliği Bütün bunlar elemanın etrafına boşluk ekler. Ancak, fark, margin'in kenar çizgisi etrafına boşluk eklemesi, padding'in ise elemanın kenar çizgisi içine boşluk eklemesi olduğunu

  • Bir değer, örneğin: div {padding: 50px} - Dört yan tüm iç boşluklar 50px olacak
  • İki değer, örneğin: div {padding: 50px 10px} - Yukarı ve aşağı iç boşluk 50px olacak, sol ve sağ iç boşluk 10px olacak
  • Üç değer, örneğin: div {padding: 50px 10px 20px} - Üst iç boşluğu 50px, sağ ve sol iç boşluğu 10px, alt iç boşluğu 20px
  • Dört değer, örneğin: div {padding: 50px 10px 20px 30px} - Üst iç boşluğu 50px, sağ iç boşluğu 10px, alt iç boşluğu 20px, sol iç boşluğu 30px

Ayrıca bakınız:

CSS eğitimi:CSS iç dolgu

CSS referans el kitabı:padding özelliği

Örnek

Örnek 1

<div> elementinin iç boşluğunu ayarlayın:

document.getElementById("myDiv").style.padding = "50px 10px 20px 30px";

Kişisel olarak deneyin

Örnek 2

<div> elementinin tüm dört kenarının iç boşluğunu "25px" olarak değiştirin:

document.getElementById("myDiv").style.padding = "25px";

Kişisel olarak deneyin

Örnek 3

Dönüş <div> elementinin iç boşluğu:

alert(document.getElementById("myDiv").style.padding);

Kişisel olarak deneyin

Örnek 4

margin özelliği ile padding özelliğinin farkı：

function changeMargin() {
  document.getElementById("myDiv").style.margin = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.padding = "100px";
}

Kişisel olarak deneyin

Sözdizimi

padding özelliğini döndürün：

object.style.padding

padding özelliğini ayarlayın：

object.style.padding = "%|length|initial|inherit"

Özellik değeri

Değer Açıklama
% Ebeveyn elementinin genişliğinin yüzdesi ile iç boşluğu tanımlar.
length İç boşluğu uzunluk birimi ile tanımlar.
initial Bu özelliği öntanımlı değerine ayarlar. Bakınız initial。
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit。

Teknik ayrıntılar

Öntanımlı değer： 0
Dönüş değeri： dizge, elementin iç boşluğunu temsil eder.
CSS sürümü： CSS1

tarayıcı destekler

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek