CSS margin-inline-start özelliği

Önceki sayfa margin-inline-end
Sonraki sayfa margin-left

Tanım ve Kullanım

margin-inline-start Öznitelik, satır içi yönün başlangıç dış kenar marjını belirtir.

CSS'nin margin-inline ilgili CSS özelliklerini margin-block Özellikleri margin-top,margin-bottom,margin-left ilgili CSS özelliklerini margin-right Özellikler çok benzerdir, ancak margin-inline ilgili CSS özelliklerini margin-block Özellik, blok yönelimine ve satır içi yönelimine bağlıdır.

Uyarı:etkiler. writing-mode ilgili CSS özelliklerini direction Satır içi yönelimi tanımlar. Bu, elemanın başlangıç ve bitiş konumlarını ve margin-inline-start Özellikin sonucu. İngilizce sayfalar için, blok yönelimi aşağıya, satır içi yönelim ise sağdan sola olacaktır.

Örnek

Örnek 1

Satır içi yönelim başlangıç noktasının marjını ayarlar:

div {
  margin-inline-start: 35px;
}

Kişisel Deneyim

Örnek 2

<div> elementinin writing-mode Özellik değeri 'vertical-rl' olarak ayarlandığında, satır içi yönelim aşağıya olacaktır. Sonuç olarak, elemanın başlangıç noktası soldan yukarıya taşınacaktır:

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

Kişisel Deneyim

Örnek 3

<div> elementinin direction Özellik değeri 'rtl' olarak ayarlandığında, satır içi yönelim sağdan sola olacaktır. Sonuç olarak, elemanın başlangıç noktası görsel olarak orijinal sol kenarından başlayacak olsa da, sağdan sola yönelim nedeniyle gerçek yerleşim etkisi farklı olacaktır:

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

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Varsayılan Değer. Elemanın varsayılan margin-inline-start değeri.
length	margin-inline-start, px, pt, cm gibi birimlerle belirlenir. Negatif değerlere izin verilir. Ayrıca bakınız:CSS Birimleri.
%	margin-inline-start, satır içi yönde ebeveyn elemanının boyutunun yüzdesiyle belirlenir.
initial	Bu özelliği, varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği, ebeveyn elemanından bu özelliği miras alır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

Varsayılan Değer:	auto
Miras Yönlendirme:	Hayır
Animasyon Yapımı:	Desteklenir. Ayrıca bakınız:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.marginInlineStart="50px"