CSS margin-inline özelliği

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

Tanım ve Kullanım

margin-inline Özellik, satır yönlü başlangıç ve bitiş dış boşluklarını belirler ve aşağıdaki özelliklerin kısaltma özelliğidir:

margin-inline Özellik değerleri farklı yollarla ayarlanabilir:

Eğer margin-inline özelliği iki değeri varsa:

margin-inline: 10px 50px;

Başlangıçta dış boşluk 10px
Sonlandığında dış boşluk 50px

Eğer margin-inline özelliği bir değeri varsa:

margin-inline: 10px;

margin-inline: 10px;

Başlangıç ve bitiş marjları 10px olan margin-inline ve margin-block Özellikleri, CSS'nin margin-topvebottom marginvemargin-left ve margin-right Özellikler çok benzerdir, ancak margin-inline ve margin-block Özellik, blok yönlü ve satır içi yönlüye bağlıdır.

Dikkat:İlgili CSS özellikleri writing-mode ve direction Satır içi yönü tanımlar. Bu, öğenin başlangıç ve bitiş konumlarını ve margin-inline-end özelliğinin sonuçlarını etkiler. İngilizce sayfalar için, blok yönlü aşağıya doğru, satır içi yönlü sağdan sola olur.

Örnek

Örnek 1

Satır yönlü her iki yanın marjını ayarlayın:

div {
  margin-inline: 35px;
}

Kişisel olarak deneyin

Örnek 2

<div> öğesinin writing-mode Özellik değeri 'vertical-rl' olarak ayarlandığında, satır yönlü aşağıya olacaktır. Sonuç olarak, öğenin başlangıç konumu sola doğru hareket eder ve bitiş konumu yukarıya doğru hareket eder:

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

Kişisel olarak deneyin

Örnek 3

<div> öğesinin direction Özellik değeri 'rtl' olarak ayarlandığında, satır yönlü sağdan sola olacaktır. Sonuç olarak, öğenin başlangıç konumu sağa doğru hareket eder ve bitiş konumu sola doğru hareket eder:

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

Kişisel olarak deneyin

CSS dilbilgisi

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

Özellik değeri

Değer	Açıklama
auto	Varsayılan değer. Öğenin varsayılan margin-inline değeri.
length	px, pt, cm gibi birimlerle belirlenen margin-inline belirtin. Negatif değerlere izin verilir. Ayrıca bakınız:CSS Birimleri.
%	Ortaya doğru ebeveyn öğesine göre büyüklüğün yüzdesi olarak margin-inline belirtin.
initial	Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği ebeveyn öğesinden miras alır. Ayrıca bakınız: inherit.

Teknik ayrıntılar

Varsayılan değer:	auto
Mirasçılık:	Hayır
Animasyon yapımı:	Desteklenir. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.marginInline="50px 10px"