CSS padding-inline-start özelliği

Önceki sayfa padding-inline-end
Sonraki sayfa padding-left

Tanımı ve Kullanımı

elemanının padding-inline-start özellikleri, satır içi yönün başlangıcında kenarlıkten içeriğe olan boşluğu belirtir.

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

Uyarı:etkiler. writing-mode ilgili CSS özelliklerini direction Satır içi yönü tanımlar. Bu, elemanın satır içi yönündeki başlangıç ve bitiş konumlarını ve padding-inline-start Özellikin sonucu. İngilizce sayfalar için, blok yönü aşağıya doğru, satır içi yön sağdan sola olacaktır.

Örnek

Örnek 1

Satır içi yönün başlangıcında iç boşluk ayarlayın:

div {
  padding-inline-start: 50px;
}

Kendiniz Deneyin

Örnek 2

Div elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır içi yön aşağıya doğru olacaktır. Sonuç olarak, elemanın başlangıç konumu soldan üstteye hareket eder:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

Kendiniz Deneyin

Örnek 3

Div elementinin direction Özellik değeri rtl olarak ayarlandığında, satır içi yön sağdan sola olacaktır. Sonuç olarak, elemanın başlangıç konumu soldan sağa hareket eder:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

Kendiniz Deneyin

CSS Dilbilgisi

padding-inline-start: auto|value|initial|inherit;

Özellik Değeri

Değer	Açıklama
auto	Öntanımlı. Elemanın öntanımlı padding-inline-start mesafesi.
length	px, pt, cm gibi birimlerle belirlenen mesafeyi belirtir. Negatif değer kullanılmaz. Aşağıdan bakınız:CSS Birimleri.
%	Ebeveyn elementine göre satır içi yön boyutunda yüzdelik mesafeyi belirtir.
initial	Bu özelliği öntanımlı değerine ayarlar. Bakınız initial.
inherit	Bu özelliği ebeveyn elementinden miras alır. Bakınız inherit.

Teknik Ayrıntılar

Öntanımlı Değer:	auto
Miras Alanlık:	Hayır
Animasyon Yapımı:	Destekleniyor. Aşağıdan bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.paddingInlineStart="100px"