CSS padding özelliği

Tanım ve Kullanım

padding kısaltma özelliği, tüm iç kenar boşluklarını bir beyanda ayarlar.

Açıklama

Bu kısaltma özelliği, elementin tüm iç kenar boşluklarının genişliğini ayarlar veya her kenarın iç kenar boşluğunu ayarlar. Düzenli satır içi değiştirici elementler üzerinde ayarlanan iç kenar boşlukları, satır yüksekliği hesaplamalarını etkilemez; bu nedenle, bir element hem iç kenar boşluğu hem de arka plana sahipse, görsel olarak diğer satırlara uzanabilir ve diğer içeriklerle çakışabilir. Elementin arka planı, iç kenar boşluğunu aşar. Negatif kenar boşluğu değerleri belirtilmez.

Açıklama:Negatif değerlerin kullanılması izin verilmez.

Örnek 1

padding:10px 5px 15px 20px;
  • Üst kenar boşluğu 10px'dır
  • Sağ kenar boşluğu 5px'dır
  • Alt kenar boşluğu 15px'dır
  • Sol kenar boşluğu 20px'dır

Örnek 2

padding:10px 5px 15px;
  • Üst kenar boşluğu 10px'dır
  • Sağ ve sol kenar boşlukları 5px'dır
  • Alt kenar boşluğu 15px'dır

Örnek 3

padding:10px 5px;
  • Üst ve alt kenar boşlukları 10px'dır
  • Sağ ve sol kenar boşlukları 5px'dır

Örnek 4

padding:10px;
  • Tüm 4 kenar boşluğu 10px'dır

Ayrıca bkz:

CSS Eğitim Seti:CSS İç Kenar Boşluğu

HTML DOM Referans Kılavuzu:padding özelliği

Örnek

p elementinin 4 kenar boşluğunu ayarlayın:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

Kişisel olarak deneyin

CSS Dilbilgisi

padding: length|initial|inherit;

Özellik Değeri

Değer Açıklama
auto Tarayıcı kenar boşluklarını hesaplar.
length Belirli bir birimle ölçülen kenar boşluğu değerini belirtir, örneğin pixel, santim vb. Varsayılan değeri 0px'dır.
% Ebeveyn elementinin genişliğine dayalı yüzdelik kenar boşluğu belirtir.
inherit Kenar boşluklarının ebeveyn elementinden miras alınması gerektiğini belirtir.

Teknik Açıklamalar

Varsayılan Değer: 0
Mirasçılık: hayır
Sürüm: CSS1
JavaScript Dilbilgisi: object.style.padding="10px 5px"

TIY Örneği

Tüm iç kenar boşlukları bir beyanda
Bu örnek, tüm iç kenar boşluklarını bir beyanda belirlemek için kısaltma özelliklerini kullanarak gösterilir, bir ila dört değer olabilir.

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5