CSS inset-inline-end özelliği

Önceki sayfa inset-inline
Sonraki sayfa inset-inline-start

Tanım ve Kullanım

inset-inline-end Özelliği belirtilmelidir. Elementin satır yönelimindeki ucunu ebeveyn elementinden ayıran mesafeyi belirler.

Dikkat:Bu özelliğin etkili olabilmesi için position Özellikleri ile

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

Dikkat:ile ilgili CSS özelliklerini etkiler. writing-mode ve direction Satır yönelimiyi tanımlar. Bu, elementin satır yönelimindeki ucunun konumunu ve inset-inline-end Özellikin sonucu. İngilizce sayfalar için, satır yönelimi soldan sağa, blok yönelimi aşağıya olacaktır.

Örnek

Örnek 1

Yerleştirilmiş <div> elementinin satır yönelimindeki ucunu ebeveyn elementinden ayıran mesafeyi ayarlayın:

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

Kişisel Deneyimlerinizi Paylaşın

Örnek 2

<div> elementinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, satır yönelimi aşağıya olacaktır. Sonuç olarak, elementin ucundan sağa aşağıya hareket edecektir:

div {
  inset-inline-end: 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önelimi sağdan sola olacaktır. Sonuç olarak, elementin ucundan sağa sola hareket edecektir:

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

Kişisel Deneyimlerinizi Paylaşın

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Öntanımlı Değer. Elemanın öntanımlı içe gömülü mesafesi.
length	px, pt, cm gibi birimlerle mesafeyi belirtin. Negatif değerlere izin verilir. Bakınız:CSS Birimleri.
%	Ebeveyn elementine göre, ilgili eksende boyutun yüzdesi olarak 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:	Hayır
Animasyon Yapımı:	Desteği Var. Bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.insetInlineEnd="30%"