Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık
top/right/bottom/left değerlerini start/end/block/inline mantıksal özellik karşılıklarıyla değiştirin.
Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Aralıklandırmanın Mantıksal Karşılıkları
Fiziksel aralıklandırma özelliklerinin, blok ve satır içi yönleri kullanan mantıksal karşılıkları vardır:
margin-top→margin-block-startmargin-bottom→margin-block-endmargin-left→margin-inline-startmargin-right→margin-inline-end
Mantıksal Kısaltılmış Özellikler
Yeni kısaltılmış özellikler, iki blok tarafını veya iki satır içi tarafını birlikte kapsar:
<div class="card">Card with logical spacing</div>
margin-inline: auto ile Ortalamaya Alma
Klasik ortalama alma deseninin artık mantıksal bir karşılığı vardır:
<div class="container">Centered container</div>
Mantıksal Kenarlık Özellikleri
Kenarlıkları mantıksal taraflara ayarlayın:
<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>
Mantıksal Konum Özellikleri
Konumlandırma özelliklerinin de mantıksal karşılıkları vardır:
top→inset-block-startbottom→inset-block-endleft→inset-inline-startright→inset-inline-end
inset Kısaltması
inset özelliği dört tarafın tümü için zaten mantıksal bir kısaltmadır. inset-block ve inset-inline iki eksenli denetim sağlar.
<div class="wrap"><div class="overlay"></div></div>
Mantıksal Boyutlandırma Özellikleri
Genişlik ve yüksekliğin mantıksal karşılıkları vardır:
<div class="box">Sized box</div>
Karşılaştırma: Fiziksel ve Mantıksal
Başlangıç tarafında kenarlığı bulunan bir kenar çubuğu:
<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>
float ve clear Mantıksal Değerleri
float ve clear özellikleri artık mantıksal değerleri destekler:
<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>
Mantıksal text-align
text-align: start ve text-align: end, metin yönüne otomatik olarak uyarlanan left ve right değerlerinin mantıksal karşılıklarıdır.
<div class="nav-link">Aligned to the start (left in LTR)</div>
Geçiş Stratejisi
Yeni kodlarda mantıksal özellikleri tercih edin. Mevcut kodlarda her seferinde bir bileşeni yeniden düzenleyin. Geçiş önceliği sırası: aralıklandırma (margin/padding), kenarlıklar, boyutlandırma, konumlandırma.
Hızlı Kontrol
LTR yerleşiminde margin-left karşılığı olan ve RTL'de margin-right olması gereken mantıksal özellik hangisidir?
Özet
Mantıksal margin, padding ve border özellikleri, fiziksel üst/sağ/alt/sol yerine block ve inline yönlerini kullanır. margin-block, padding-inline ve inset-block gibi kısaltmalar iki tarafı aynı anda kapsar. Yeni kodlarda tüm aralıklandırmalar için mantıksal özellikleri tercih ederek otomatik RTL ve dikey yazma modu desteği sağlayın.
Sıkça Sorulan Sorular
“Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık” dersi ücretsiz mi?
Evet — “Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık” dersinde ne öğreneceğim?
top/right/bottom/left değerlerini start/end/block/inline mantıksal özellik karşılıklarıyla değiştirin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Mantıksal Özellikler Neden Önemlidir: Uluslararasılaştırma
- Blok ve Satır İçi Yönler
- Mantıksal Kenar Boşluğu, İç Dolgu ve Kenarlık
- RTL Yerleşimlerinde Mantıksal Özellikler