CSS inset-block-start özelliği

Kurs Önerisi:

inset-block-start Tanım ve Kullanım

Dikkat:Bu özelliğin etkili olabilmesi için, elemanın blok yönündeki başlangıç noktası ile ebeveyn öğesi arasındaki mesafeyi belirlemek zorundasınız. position Özellikleri

CSS'nin inset-inline ve inset-block Özellikleri CSS'nin yüksek,düşük,sol ve sağ Özellikler çok benzerdir, ancak inset-block ve inset-inline Özellik, blok yönü ve satır yönüne bağlıdır.

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

Örnek

Örnek 1

Konumlandırılmış <div> elemanının blok yönündeki başlangıç noktası ile ebeveyn öğesi arasındaki mesafeyi ayarlayın:

div {
  inset-block-start: 50px;
}

Kişisel olarak deneyin

Örnek 2

<div> elemanının writing-mode Özellik değeri vertical-rl olarak ayarlandığında, blok yönü sağdan sola doğru olur. Sonuç olarak, elemanın başlangıç noktası üstten sağa doğru hareket eder:

div {
  inset-block-start: 50px;
  writing-mode: vertical-rl;
}

Kişisel olarak deneyin

CSS Dilbilgisi

inset-block-start: auto|length|initial|inherit;

Özellik Değeri

Değer Açıklama
auto Öntanımlı Değer. Öğenin öntanımlı inset mesafesini kullanır.
length

Sabit birim (örneğin px, pt, cm vb.) kullanarak mesafeyi belirtin. Negatif değerlere izin verilir.

Bakınız:CSS Birimleri.
% Yüzde kullanarak mesafeyi belirtin, ebeveyn öğesinin ilgili eksen üzerindeki boyutuna göre.
initial Bu özelliği, öntanımlı değerine ayarlayın. Bakınız initial.
inherit Bu özelliği, ebeveyn öğesinden bu özelliği miras alarak tanımlayın. Bakınız inherit.

Teknik Ayrıntılar

Öntanımlı Değer: auto
Miras Alanlık: Hayır
Animasyon Yapımı: Desteği Var. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.insetBlockStart="100px"

Tarayıcı Desteği

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

Chrome Edge Firefox Safari Opera
87.0 87.0 63.0 14.1 73.0

İlgili sayfalar

Eğitim:CSS Konumlandırma

Referans:CSS position özelliği

Referans:CSS writing-mode özelliği