Yükleniyor...

CSS Yükseklik ve Genişlik

Kutuyu çerçeveliyor, yuvarlıyor, dış ve iç boşluk veriyorsunuz. Sıradaki beceri: kutunun ne kadar büyük olacağına karar vermek. width ve height, içerik kutusunun boyutunu ayarlar — o çekirdek ne kadar geniş ve ne kadar yüksek olsun.

width ve height ne yapar?

width yatay boyutu kontrol eder. height dikey boyutu. Yaygın değerler px gibi uzunluklar veya % gibi göreli boyutlar kullanır. Dokunmazsanız birçok öğe boyutunu içeriğinden ve düzen bağlamından alır.

Pikselle sabit boyut

Net günlük başlangıç: bir panele pikselle kesin genişlik (ve isteğe bağlı yükseklik) verin.

Sabit piksel genişliği

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Genişlik ve yükseklik birlikte

Tasarım kesin bir dikdörtgen istediğinde — küçük resim çerçevesi, döşeme, medya yeri — ikisini de ayarlayın.

Döşemede genişlik ve yükseklik

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Yüzde genişlik

% genişlik genellikle içeren bloğun genişliğine (sıkça ebeveyne) göredir. width: 50% «ebeveynimin genişliğinin kabaca yarısı» demektir; sihirle ekranın yarısı değil.

Ebeveyn genişliğinin yarısı

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Boyutlandırma araçları bir bakışta

Düz width ve height’ın ötesinde CSS korkuluklar da verir.

📊 Genişlik ve yükseklik araçları

Araç Rol Günlük not
width / height İçerik kutusunun tercih edilen boyutu Sabit veya akışkan boyut için buradan başlayın
min-width / min-height Bunun altına küçülme Düğmeler veya kenar çubukları kullanılabilir kalsın
max-width / max-height Bunun üstüne büyüme Dev görselleri veya geniş metni yumuşatın
auto Tarayıcı hesaplasın Varsayılan yükseklik çoğu zaman içeriği izler
% İçeren bloğa göreli Genişlik % yaygındır; yükseklik % tanımlı ebeveyn yüksekliği ister

Zemin olarak min-width

Düzen sıkışsa bile kutunun kullanılabilir kalması gerektiğinde yararlıdır.

Minimum genişlik zemini

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

Tavan olarak max-width

Okunur metin veya büyük ekranlarda sonsuza uzamayan görseller için klasik alışkanlık.

Maksimum genişlik tavanı

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

Yükseklik çoğu zaman auto kalır

Metin bloklarında yüksekliğin içerikle büyümesine izin verin. Çok küçük sabit yükseklik, overflow planlamazsanız metni kesebilir (sonraki ders).

Auto yükseklik içeriği izler

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* paragraflarla büyür */
padding: 1rem;
border: 1px solid #cbd5e1;
}

Kendiniz deneyin

  1. width: 320px ve görünür padding/kenarlıklı panel.
  2. Genişlik ve yüksekliği olan 160×120 döşeme.
  3. Daha geniş ebeveynde width: 50% çocuk; ebeveyni yeniden boyutlandırın.
  4. Düğmeye min-width: 12rem ekleyip viewport’u küçültün.
  5. Metin bloğuna max-width: 40rem ve height: auto verin — sonra çok küçük sabit yükseklik deneyip kesilme riskini görün.

Yaygın hatalar

  • Açık ebeveyn yüksekliği olmadan height: 50% (yüzde beklediğiniz gibi davranmayabilir)
  • Metin kutusuna kısa height kilitleyip içeriğin kesilmesine şaşmak
  • Büyük görsellerde veya uzun satırlarda max-width unutmak
  • width (içerik kutusu boyutu) ile padding (iç yastık) karıştırmak
  • widthın her zaman kenarlık ve padding’i kapsadığını sanmak — box-sizinge bağlı (yakında)

Özet

  • width ve height içerik kutusunu boyutlandırır
  • Sabit boyut için px, ebeveyne göreli akışkan genişlik için %
  • min-* ve max-* zemin ve tavan koyar
  • Büyüyen metin için height: auto tercih edin
  • Yüzde yükseklik tanımlı yüksekliği olan ebeveyn ister
  • Tam kutu hesabı sonraki box model derslerinde gelir

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
9
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders