CSS padding-block özelliği

Önceki sayfa padding
Sonraki sayfa padding-block-end

Tanım ve Kullanım

öğesinin padding-block Bu, kenar çizgisi ile içerik arasındaki blok yönlü alan demektir ve aşağıdaki özelliklerin kısaltmasıdır:

padding-block Özellik değeri farklı şekillerde ayarlanabilir:

padding-block özelliği iki değere sahipse:

padding-block: 10px 50px;

Başlangıç yerindeki iç boşluk 10px'dır
Bitiş yerindeki iç boşluk 50px'dir

padding-block özelliği bir değere sahipse:

padding-block: 10px;

Başlangıç ve bitiş yerleri iç boşlukları 10px'dır

CSS padding-block ve padding-inline Özellikleri, CSS Özellikleri padding-top,padding-bottom,padding-left ve padding-right oldukça benzer, ancak padding-block ve padding-inline Özellik, blok yönü ve satır içi yönüne bağlıdır.

Uyarı:İlgili CSS Özellikleri writing-mode Blok yönünü tanımlar. Bu, bloğun başlangıç ve bitiş konumlarını ve padding-block Özellikin sonucu. İngilizce sayfalar için, blok yönü aşağıya doğru, satır içi yönü soldan sağa doğru olur.

Örnek

Örnek 1

Blok yönü her iki yanına iç boşluk ayarlar:

p {
  padding-block: 35px;
}

Kendiniz Deneyin

Örnek 2

<div> öğesinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, öğenin başlangıç konumu üstten sağa, bitiş konumu alttan solda hareket eder:

div {
  writing-mode: vertical-rl;
  padding-block: 10px 50px;
}

Kendiniz Deneyin

CSS Dilbilgisi

padding-block: auto|value|initial|inherit;

Özellik Değeri

Değer	Açıklama
auto	Öntanımlı Değer. Elemanın öntanımlı padding-block değeri.
length	px, pt, cm gibi birimlerle padding-block belirlenir. Negatif değerlere izin verilmez. Ayrıca bakınız:CSS Birimleri.
%	Padding-block, satır içi yönde ebeveyn öğesinin büyüklüğünün yüzdesi olarak belirlenir.
initial	Bu özelliği, öntanımlı değerine ayarlar. Bakınız initial.
inherit	Bu özelliği, ebeveyn öğesinden devralır. Bakınız inherit.

Teknik Ayrıntılar

Öntanımlı Değer:	auto
Devralabilirlik:	Hayır
Animasyon Yapımı:	Desteklenir. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.paddingBlock="100px 50px"