Genişlik ve yükseklik

width ve height özelliklerini öğrenirsin.

width ve height

width bir kutunun içerik genişliğini, height ise içerik yüksekliğini belirler. Bu iki özellik yalnızca içerik kutusunu ölçüler; padding, border ve margin buna eklenir.

Değer olarak piksel (px), yüzde (%) veya auto verilir. auto tarayıcının boşluğu kendiliğinden dağıtmasını ister; örneğin blok öğeler varsayılan olarak tüm genişliği kaplar.

min-width ve max-width

Bazen kutunun ne kadar küçük veya büyük olabileceğini sınırlamak istersin. min-width bir kutunun en küçük genişliğini, max-width ise en büyük genişliğini zorlar.

Örneğin bir kartta width: 100% yazıp max-width: 600px eklersen, kart küçük ekranda tam genişlik alır, büyük ekranda 600 pikseli geçmez. Buna akışkan ama sınırlı düzen denir.

Uygulama Akışkan kartı yaz

.card seçicisi için bir blok yaz. Genişlik tam olsun (width: 100%), ama 600 pikselden büyük olmasın (max-width: 600px).

Örnek çözümü göster

.card {
  width: 100%;
  max-width: 600px;
}

Kendini test et

width özelliği kutunun hangi parçasını ölçer?
- Sadece içerik alanını
- Sadece padding'i
- İçerik, padding ve border'ı birlikte
- Tüm kutuyu (margin dahil)
Cevabı göster

Sadece içerik alanını — Doğru. width yalnızca içerik alanını ölçer; padding ve border buna eklenir.

Akışkan kart biçimi

.card {
  width: 100%;
  ____: 600px;
}

Cevabı göster

.card {
  width: 100%;
  max-width: 600px;
}

max-width ne zaman işe yarar?
- Pencere küçüldükçe kartı daraltmak için
- Büyük ekranda kartın çok genişlemesini engellemek için
- Kartın arka plan rengini değiştirmek için
- Kartı yatayda ortalamak için
Cevabı göster

Büyük ekranda kartın çok genişlemesini engellemek için — Doğru. max-width, geniş ekranda kartın sınırsız büyümesini engeller.
Ölçü özelliğini rolüyle eşleştir

width

İçerik genişliğini belirler
height

İçerik yüksekliğini belirler
max-width

En büyük genişliği sınırlar
min-width

En küçük genişliği zorlar

Sıradaki ders: Padding

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler