Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama
width, height, margin ve padding özelliklerinin öğe boyutlarını ve aralıklarını nasıl belirlediğini öğrenin.
Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.
Kutu Modeli Kavramı
Her HTML öğesi dikdörtgen bir kutu olarak görüntülenir. CSS kutu modeli, bu kutuyu içten dışa oluşturan dört katmanı açıklar: içerik → iç dolgu → kenarlık → dış boşluk.
width ve height
width ve height, içerik alanının boyutlarını ayarlar. Varsayılan olarak iç dolgu ve kenarlık bu boyuta eklenir.
<div class="box"></div>
padding
padding, kenarlığın içinde, içerik ile kenarlık kenarı arasında bulunan saydam boşluktur. Öğenin tıklanabilir ve arka planla boyanan alanının bir parçasıdır.
<div class="card">Card content</div>
padding Uzun Gösterimleri
Her kenar ayrı ayrı ayarlanabilir:
<div class="element">Padded element</div>
margin
margin, kenarlığın dışında bulunan saydam boşluktur. Diğer öğeleri uzağa iter. Negatif dış boşluklar öğeleri birbirine yaklaştırır veya üst üste bindirir.
<div class="section">Centered section with bottom margin</div>
Dış Boşlukların Birleşmesi
Dikey dış boşluklar, bitişik blok öğeleri arasında birleşir: gerçek aralık, iki dış boşluğun toplamı değil, büyük olanıdır. Yatay dış boşluklar hiçbir zaman birleşmez.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Dış Boşlukların Birleşmesini Önleme
Dış boşlukların birleşmesi şu durumlarda önlenir:
- Öğeler flex veya grid alt öğeleriyse
- Üst öğede
overflow: hiddenvarsa - Üst öğede, üst öğe ile ilk alt öğe arasında
paddingvarsa - Alt öğeler arasında bir satır içi öğe bulunuyorsa
auto Dış Boşlukları
Sabit genişliğe sahip bir blok öğesinin yatay dış boşluklarını auto olarak ayarlamak, öğeyi kapsayıcısı içinde ortalar. Bu, klasik ortalama tekniğidir.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Öğelerin farklı ekran boyutlarında okunabilir kalması için boyutları minimum ve maksimum sınırlarla kısıtlayın:
<div class="content">Readable content column capped at 65 characters wide.</div>
Toplam Öğe Boyutunu Hesaplama
Varsayılan content-box modelinde toplam genişlik = width + padding-left + padding-right + border-left + border-right. Bu durum şaşırtıcı olabilir; bu nedenle border-box tercih edilir.
Mantıksal Dış ve İç Boşluk Özellikleri
Modern CSS, mantıksal eşdeğerler sunar: margin-block, margin-inline, padding-block-start vb. Bunlar yazma yönüne otomatik olarak uyum sağlar.
<div class="card">Logical padding-block/inline</div>
Hızlı Kontrol
Varsayılan kutu modelinde bir blok öğesinin görüntülenen toplam genişliğine hangi katmanlar dahildir?
Özet
Kutu modeli katmanları içerik, iç dolgu, kenarlık ve dış boşluktur. İç dolgu kenarlığın içindedir; dış boşluk ise dışındadır. Dikey dış boşluklar bitişik kardeş öğeler arasında birleşir. Blok öğelerini ortalamak için sabit genişlikle margin: 0 auto kullanın.
Sıkça Sorulan Sorular
“Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama” dersi ücretsiz mi?
Evet — “Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama” 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.
“Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama” dersinde ne öğreneceğim?
width, height, margin ve padding özelliklerinin öğe boyutlarını ve aralıklarını nasıl belirlediğini öğrenin. 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 1. dersidir.
“Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama” 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
- Genişlik, Yükseklik, Kenar Boşluğu ve İç Boşluğu Anlama
- Kenarlık Stilleri, Genişliği ve Rengi
- Box-Sizing: Content-Box ve Border-Box
- Outline ve Box-Shadow