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

CSS'deki margin-inline-endözellik, satır içi yöndeki bir öğenin dış bitiş kenarı boyunca boşluk miktarını tanımlar. Şu anda Çalışma Taslağında bulunan CSS Mantıksal Özellikleri Seviye 1 spesifikasyonuna dahil edilmiştir.

.element ( margin-inline-end: 25%; writing-mode: vertical-lr; )

İçi yönünde bitiş uç elemanı 's belirlenir writing-mode, directionve text-orientation. Dolayısıyla, margin-inline-endsoldan sağa yatay bağlamda kullanıldığında, tıpkı margin-rightöğenin bitiş kenarının sağ taraf olduğu gibi davranır .

Ancak writing-mode, diyelim ki dikey olarak değiştirirsek, eleman saat yönünde döndürülür ve bitiş kenarı alta doğru yerleştirilir. Sonuç olarak aynı şekilde margin-inline-enddavranır margin-bottom. Temel olarak, başlangıç kenarı aktığı yöne bağlıdır. "Mantıksal" özelliklerden bahsederken kastettiğimiz budur.

Sözdizimi

margin-inline-end:

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 aynı değerleri kabul ettiği :

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

margin-block-start tek bir uzunluk veya anahtar kelime değerini kabul eder.

/* Length values */ margin-inline-end: 20px; margin-inline-end: 2rem; margin-inline-end: 25%; /* Keyword values */ margin-inline-end: auto; /* Global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset;