CSS margin-block özelliği

Önceki sayfa margin
Sonraki sayfa margin-block-end

Tanım ve Kullanım

margin-block Özellik, blok yönündeki başlangıç ve bitiş kenarları arasındaki dış kenarı belirler ve aşağıdaki özelliklerin kısaltmasıdır:

margin-block-start
margin-block-end

margin-block Özelliğin değeri farklı yöntemlerle ayarlanabilir:

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

margin-block: 10px 50px;

Kenarın dış kenarı 10px'dır
Bitiş kenar marjları 50px'tır

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

margin-block: 10px;

Başlangıç ve bitiş kenar marjları 10px'tır

CSS'nin margin-block ve margin-inline Özellikleri CSS'nin margin-top,margin-bottom,margin-left ve margin-right Özellikleri çok benzerdir, ancak margin-block ve margin-inline Özellik, blok yönlü ve satır yönlüye bağlıdır.

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

Örnek

Örnek 1

Blok yönlüde her iki yanın marjını ayarlar:

div {
  margin-block: 35px;
}

Kişisel Deneyim

Örnek 2

div öğesinin writing-mode Writing-mode özelliği vertical-rl olarak ayarlandığında, blok yönlüde öğelerin başlangıç konumu üstten sağa taşınır, öğelerin bitiş konumu alttan solda bırakılır. Writing-mode değişiklikleri margin-block etkisini de etkiler:

#parentDiv {
  writing-mode: vertical-rl;
}
#myDiv {
  margin-block: 10px 50px;
}

Kişisel Deneyim

CSS Dilbilgisi

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

Özellik Değeri

Değer	Açıklama
auto	Varsayılan Değer. Öğenin varsayılan margin-block değeri.
length	px, pt, cm gibi birimlerle margin-block belirtilir. Negatif değerlere izin verilir. Ayrıca bakınız:CSS Birimleri.
%	Parent elemente göre satır yönlüde margin-block'un yüzdesel büyüklüğünü belirtir.
initial	Bu özelliği varsayılan değerine ayarlar. Ayrıca bakınız: initial.
inherit	Bu özelliği, ebeveyn öğesinden devralır. Ayrıca bakınız: inherit.

Teknik Ayrıntılar

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