Satır içi kenar boşluğu - CSS Hileleri

margin-inlineCSS'de , her ikisi de mantıksal özellikler olan bir öğenin margin-inline-startve margin-inline-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-inline: 60px auto; writing-mode: vertical-rl; /* Determines the inline start direction */ )

Olarak writing-modeayarlanırsa horizontal-lr, margin-inlineözellik aynı margin-leftve ayarı gibi davranacaktır margin-right. 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) satır içi yön marjlarını ayarlayan daha eski bir özellik yoktur.

Ancak, öğelerin writing-modebenzerini değiştirin vertical-lrve "satır içi" kenarlar dikey yönde döndürülerek daha çok margin-topve margin-bottomözellikleri gibi davranın.

Sözdizimi

margin-inline: (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-inline, kendinizi çok tanıdık hissedeceksiniz. Tek fark, dört yerine iki yönde çalışmasıdır.

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