Marj bloğu - CSS Hileleri | CSS Almanak 2024

margin-blockCSS'de , her ikisi de mantıksal özellikler olan bir öğenin margin-block-startve margin-block-enddeğerlerini ayarlayan bir kısa özelliktir . Bu eleman en belirlenir satır içi yönünde elemanı, çevresindeki boşluk yaratır writing-mode, directionve text-orientation.

Özellik, şu anda Editörün Taslak durumunda olan CSS Mantıksal Özellikleri ve Değerleri Seviye 1 spesifikasyonunun bir parçasıdır. Bu, onunla ilgili tanım ve bilgilerin şimdiki ve resmi tavsiye arasında değişebileceği anlamına gelir.

.element ( margin-block: 30px 60px; writing-mode: vertical-rl; /* Determines the block start direction */ )

Olarak writing-modeayarlanırsa horizontal-lr, margin-blocközellik aynı margin-topve ayarı gibi davranacaktır margin-bottom. Bu özelliğin ilginç bir yönü, mantıksal olmayan bir özelliğe sahip bire bir haritaya sahip olmayan mantıksal özelliklerden biri olmasıdır. Hem (hem de yalnızca) blok yönü marjlarını ayarlayan daha eski bir özellik yoktur.

Ama eleman en değiştirmek writing-modegibi bir şey için vertical-lrdaha fazla gibi davranan ve “alt” kenar dikey yönde döndürülür margin-leftve margin-rightözellikleri.

Sözdizimi

margin-block: (1,2)

Bir özelliğin sözdiziminin doğrudan dokümantasyonda başka bir CSS özelliğinin sözdizimine başvurduğunu görmek biraz tuhaf, ama gerçekte olan bu. Temel olarak söylemeye çalıştığı şey, mülkün margin-topbu sözdizimini izleyen (iki kata kadar) aynı değerleri kabul ettiğidir:

margin-top: | | auto;

Başlangıç değeri: 0
Şunlar için geçerlidir: dahili tablo öğeleri, yakut temelli kaplar ve yakut detaylandırma kutuları hariç tüm öğeler
Devralındı: hayır
Yüzdeler: karşılık gelen fiziksel özellik için
Hesaplanan değer: karşılık gelen margin-*özelliklerle aynı
Animasyon türü: hesaplanan değer türüne göre

Değerler

marginSteno özelliği hakkında bilgi sahibiyseniz margin-block, kendinizi çok tanıdık hissedeceksiniz. Tek fark, dört yerine iki yönde çalışmasıdır.

/* Length values */ margin-block: 20px 40px; margin-block: 2rem 4rem; margin-block: 25% 15%; margin-block: 20px; /* a single value sets both values */ /* Keyword values */ margin-block: auto; /* Global values */ margin-block: inherit; margin-block: initial; margin-block: unset;