CSS inset-inline-start özelliği

Önceki sayfa inset-inline-end
Sonraki sayfa isolation

定义和用法

inset-inline-start Özelliği belirlerken, elemanın satır yönlü başlangıç ucunu ebeveyn elementinden ayırır.

Uyarı:Özelliği belirlemelisiniz. Bu özelliğin etkili olabilmesi için position

CSS'nin inset-inline ilgili inset-block Özellikleri CSS'nin üst,alt,sol ilgili sağ Özellikler çok benzerdir, ancak inset-block ilgili inset-inline Özellik, blok yönlü ve satır yönlüye bağlıdır.

Uyarı:CSS özelliklerini writing-mode ilgili direction Satır yönlüyi tanımlar. Bu, elemanın satır yönlü başlangıç konumunu ve inset-inline-start Özellikin sonucu. İngilizce sayfalar için, satır yönlü soldan sağa, blok yönlü aşağıya olacaktır.

Örnek

Örnek 1

Konumlandırılmış <div> elementinin satır yönlü başlangıç ucunu ebeveyn elementinden ayıran mesafeyi ayarlayın:

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

Kişisel Deneyimlerinizi Paylaşın

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır yönlü aşağıya olacaktır. Sonuç olarak, elemanın başlangıç ucunda soldan üstüye doğru hareket eder:

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

Kişisel Deneyimlerinizi Paylaşın

Örnek 3

<div> elementinin direction Özellik değeri rtl olarak ayarlandığında, satır yönlü sağdan sola olacaktır. Açıklamada küçük bir yazım hatası vardır, 'Sonuç olarak, elemanın başlangıç ucunda hala sağda kalır (çünkü rtl için başlangıç ucu zaten sağdadır, sadece öntanımlı ltr düzenine göre tüm içerik döndürülür)' der:

div {
  inset-inline-start: 50px;
  direction: rtl;
}

Kişisel Deneyimlerinizi Paylaşın

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Öntanımlı Değer. Elemanın öntanımlı içe yerleştirme mesafesi.
length	px, pt, cm gibi birimlerle belirlenen mesafeyi belirtin. Negatif değerlere izin verilir. Ayrıca bakınız:CSS Birimleri.
%	Ebeveyn elementine göre, ilgili eksen üzerindeki boyutun yüzdesi olarak belirlenen mesafeyi belirtir.
initial	Bu özelliği, öntanımlı değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği, ebeveyn elementinden bu özelliği miras alır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Öntanımlı Değer:	auto
Geçişlilik:	Hayır
Animasyon Yapımı:	Destekleniyor. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.insetInlineStart="30%"