CSS inset-block özelliği

Önceki sayfa inset
Sonraki sayfa inset-block-end

Tanım ve Kullanım

inset-block Özellik ayar elemanı, blok yönlü olarak ebeveyn elemanı ile arasındaki mesafeyi belirler.

Dikkat:Bu özelliğin etkili olabilmesi için, bu özelliği belirlemek zorundasınız. position Özellik.

inset-block Özellik, aşağıdaki özelliklerin kısaltılmış halidir:

inset-block-start
inset-block-end

inset-block Özellik değerleri farklı yollarla ayarlanabilir:

inset-block özelliği iki değer içeriyorsa:

inset-block: 10px 50px;

Başlangıç mesafesi 10px
Bitiş mesafesi 50px

inset-block özelliği bir değer içeriyorsa:

inset-block: 10px;

Başlangıç ve bitiş mesafeleri her ikisi de 10px

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

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

Örnek

Örnek 1

Yerleştirilmiş <div> öğesini blok yönlü olarak ebeveyn öğesinden mesafeli olarak ayarlar:

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

Kişisel Deneyim

Örnek 2

<div> öğesinin writing-mode Özellik değeri vertical-rl olarak ayarlandığında, öğenin başlangıç konumu üstten sağa taşınır, öğenin bitiş konumu alttan sola taşınır:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Varsayılan Değer. Öğenin varsayılan inset-block değeri.
length	px, pt, cm gibi birimlerle mesafeyi belirtin. Negatif değerlere izin verilir. Ayrıca bakınız:CSS Birimleri.
%	Ebeveyn öğesine göre, ilgili eksen üzerindeki yüzdesel mesafeyi belirtir.
initial	Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği, ebeveyn öğesinden bu özelliği devralır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	auto
Geçişlik:	Hayır
Animasyon Yapımı:	Desteklenir. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.insetBlock="100px 50px"