CSS padding-inline özelliği

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

Tanımı ve Kullanımı

Elementin padding-inline Bu, çerçeve ile içerik arasındaki boşluğu satır içi yönlü olarak belirtir. Aşağıdaki özelliklerin kısaltmasıdır:

padding-inline Özellik değeri farklı yöntemlerle ayarlanabilir:

padding-inline özelliği iki değer içeriyorsa:

padding-inline: 10px 50px;

Başlangıç uçunun iç boşluğu 10px'dir
Son uçun iç boşluğu 50px'dir

padding-inline özelliğine bir değer verilirse:

padding-inline: 10px;

Başlangıç ve bitiş uçlarındaki iç dolgu 10px'tır

CSS padding-inline ilgili CSS özelliklerini padding-block Özellikleri CSS özellikleri padding-topvepadding-bottomvepadding-left ilgili CSS özelliklerini padding-right Çok benzer, ancak padding-inline ilgili CSS özelliklerini padding-block Özellik, satır içi yöntem ve blok yöntemine bağlıdır.

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

Örnek

Örnek 1

Satır içi yöndeki her iki yanına iç dolgu ayarlanır:

div {
  padding-inline: 50px;
}

Kişisel Olarak Deneyin

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır içi yöntem aşağıya doğru olur. Sonuç olarak, elemanın başlangıç ucu sola, bitiş ucu yukarıya taşınır:

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

Kişisel Olarak Deneyin

Örnek 3

<div> elementinin direction Özellik değeri rtl olarak ayarlandığında, satır içi yöntem sağdan sola doğru olur. Sonuç olarak, elemanın başlangıç ucu sağa, bitiş ucu sola taşınır:

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

Kişisel Olarak Deneyin

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Öntanımlı. Elementin öntanımlı padding-inline uzaklığı.
length	Uzaklık, px, pt, cm gibi birimlerle belirlenir. Negatif değerlere izin verilmez. Ayrıca bakınız:CSS Birimleri.
%	Uzaklık, ebeveyn elemanın satır içi yöndeki boyutunun yüzdesi ile belirlenir.
initial	Bu özelliği, öntanımlı değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği, ebeveyn elemanından alır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Öntanımlı Değer:	auto
Geçirimsellik:	Hayır
Animasyon Yapımı:	Destekleniyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.paddingInline="100px 20px"