CSS'deki margin-inline-start
özellik, satır içi yöndeki bir öğenin dış başlangıç 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-start: 25%; writing-mode: vertical-lr; )
İçi yönünde başlangıç uç elemanı 's belirlenir writing-mode
, direction
ve text-orientation
. Dolayısıyla, margin-inline-start
soldan sağa yatay bir bağlamda kullanıldığında, tıpkı margin-left
öğenin başlangıç kenarının sol taraf olduğu gibi davranır .
Ancak writing-mode
dikey olarak değiştirirsek, öğe saat yönünde döndürülerek başlangıç kenarı yukarı doğru yerleştirilir. Sonuç olarak aynı şekilde margin-inline-start
davranır margin-top
. Temel olarak, başlangıç kenarı aktığı yöne bağlıdır. "Mantıksal" özelliklerden bahsederken kastettiğimiz budur.
Sözdizimi
margin-inline-start:
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-top
bu 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-start: 20px; margin-inline-start: 2rem; margin-inline-start: 25%; /* Keyword values */ margin-inline-start: auto; /* Global values */ margin-inline-start: inherit; margin-inline-start: initial; margin-inline-start: unset;
Demo
Öğenin başlangıç satır içi kenarının ile birlikte nasıl değiştiğini görmek için aşağıdaki demodaki düğmeyi tıklayın writing-mode
.
Tarayıcı desteği
IE | Kenar | Firefox | Krom | Safari | Opera |
---|---|---|---|---|---|
Hayır | 79+ | 41+ | 69+ | 12.1+ | 56+ |
Android Chrome | Android Firefox | Android Tarayıcı | iOS Safari | Opera Mobile |
---|---|---|---|---|
Evet | Evet | 81+ | 12.2+ | 59+ |
daha fazla okuma
31 Ağustos 2018 tarihli makaleCSS Mantıksal Özellikleri
marj









