Boyut, Boşluk ve Kenarlık

Bu dersin sonunda bir kutunun boyutunu, iç ve dış boşluklarını, kenarlığını ve gölgesini ayarlayabileceksiniz.

width ve height

width genişliği, height yüksekliği belirler. Blok elemanlar varsayılan olarak bulundukları satırın tamamını kaplar. Yükseklikleri ise içeriklerine göre belirlenir.

Sabit bir boyut vermek yerine sınırlar da koyabilirsiniz:

• max-width En fazla bu kadar genişleyebilir.
• min-width En az bu kadar geniş olur.
• max-height ve min-height Aynı kurallar yükseklik için geçerlidir.

<div style="background-color: lightblue; margin-bottom: 8px;">Genişlik verilmedi, satırı kaplıyor.</div>
<div style="background-color: lightgreen; margin-bottom: 8px; width: 200px;">width: 200px</div>
<div style="background-color: khaki; margin-bottom: 8px; width: 100%; max-width: 300px;">width: 100% ama en fazla 300px</div>
<div style="background-color: lightpink; min-height: 80px;">Yazı az ama en az 80px yüksek</div>

Metin kutularında max-width çok işe yarar. Satırlar çok uzarsa okumak zorlaşır. height değerini ise mümkünse vermeyin, çünkü içerik büyürse kutudan taşar.

aspect-ratio kutunun en boy oranını sabitler. aspect-ratio: 16 / 9 yazarsanız yalnızca genişlik vermeniz yeterli olur.

<div style="width: 240px; aspect-ratio: 16 / 9; background-color: slateblue; color: white;">16 / 9</div>

padding ve margin

CSS’e Köprü dersinde kutu modelini gördünüz: padding kenarlığın içindeki, margin dışındaki boşluktur.

İkisi de aynı şekilde yazılır. Tek bir kenar için padding-top, padding-right, padding-bottom, padding-left kullanabilirsiniz. Kısa yazımda değer sayısı anlamı değiştirir:

padding: 10px;                 dört kenar da 10px
padding: 10px 20px;            üst-alt 10px, sağ-sol 20px
padding: 10px 20px 30px;       üst 10px, sağ-sol 20px, alt 30px
padding: 10px 20px 30px 40px;  üst, sağ, alt, sol

Dört değerli yazımı saat yönünde düşünün: Üstten başlar, sağa, alta ve sola gider.

<div style="background-color: lightblue; padding: 10px; margin-bottom: 8px;">padding: 10px</div>
<div style="background-color: lightgreen; padding: 10px 40px; margin-bottom: 8px;">padding: 10px 40px</div>
<div style="background-color: khaki; padding: 5px 10px 30px 60px; margin-bottom: 8px;">padding: 5px 10px 30px 60px</div>
<div style="background-color: lightpink; padding-left: 80px;">padding-left: 80px</div>

Kutuyu ortalamak

text-align: center kutunun içindeki yazıyı ortalar, kutuyu taşımaz. Kutunun kendisini ortalamak için bir genişlik verin ve sağ ile sol dış boşlukları auto yapın.

<div style="width: 200px; margin: 0 auto; background-color: gold; text-align: center;">Ben ortadayım</div>

Dış boşluklar birleşir

Alt alta duran iki blok elemanın dikey margin değerleri toplanmaz, büyük olan kullanılır. Aşağıdaki iki kutunun arası 50px değil, 30px’tir.

<div style="background-color: lightblue; margin-bottom: 30px;">margin-bottom: 30px</div>
<div style="background-color: lightgreen; margin-top: 20px;">margin-top: 20px</div>

Bu davranış yalnızca dikey dış boşluklarda olur. padding ve yatay margin değerleri birleşmez.

margin değeri negatif de olabilir ve elemanı o yöne kaydırır. padding negatif olamaz.

border: Kenarlık

border üç değer alır: kalınlık, stil ve renk. Stil yazmazsanız kenarlık görünmez.

Stil değerleri arasında solid, dashed, dotted, double ve none vardır. Tek bir kenar için border-top, border-right, border-bottom, border-left kullanılır.

<p style="border: 2px solid teal; padding: 8px;">solid</p>
<p style="border: 2px dashed crimson; padding: 8px;">dashed</p>
<p style="border: 3px dotted navy; padding: 8px;">dotted</p>
<p style="border: 4px double black; padding: 8px;">double</p>
<p style="border-left: 6px solid gold; padding-left: 12px;">Yalnızca sol kenar</p>
<h2 style="border-bottom: 2px solid lightgray; padding-bottom: 6px;">Alt çizgili başlık</h2>

Tablolarda hücrelerin kenarlıkları varsayılan olarak ayrı durur. Tek çizgi yapmak için table etiketine border-collapse: collapse yazın.

<table style="border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid gray; padding: 6px;">Bir</td>
    <td style="border: 1px solid gray; padding: 6px;">İki</td>
  </tr>
</table>

border-radius: Yuvarlak köşeler

Kenarlık olmasa da çalışır. Yüzde değerleri elemanın boyutuna göredir. Kare bir kutuya 50% verirseniz daire olur.

<div style="background-color: teal; color: white; padding: 12px; border-radius: 8px; margin-bottom: 8px;">8px köşe</div>
<div style="background-color: crimson; color: white; padding: 12px; border-radius: 999px; margin-bottom: 8px; width: 120px; text-align: center;">Hap</div>
<div style="background-color: gold; width: 80px; height: 80px; border-radius: 50%;"></div>

box-sizing: Genişlik neyi kapsar?

Varsayılan olarak width yalnızca içeriği kapsar. width: 200px, padding: 20px ve border: 5px yazarsanız kutu ekranda 250px yer kaplar. Bu çoğu zaman şaşırtıcıdır.

box-sizing: border-box yazarsanız padding ve border değerleri genişliğin içinden düşülür:

<div style="width: 200px; padding: 20px; border: 5px solid crimson; margin-bottom: 8px;">250px yer kaplıyor</div>
<div style="width: 200px; padding: 20px; border: 5px solid teal; box-sizing: border-box;">200px yer kaplıyor</div>

Form alanlarında bu özellik çok işe yarar. width: 100% olan bir input, kendi padding ve border değerleri yüzünden bulunduğu kutudan taşabilir:

<div style="width: 220px; padding: 8px; border: 2px solid teal;">
  <input type="text" placeholder="Taşıyor" style="width: 100%; padding: 8px;">
  <input type="text" placeholder="Sığıyor" style="width: 100%; padding: 8px; box-sizing: border-box;">
</div>

box-shadow ve outline

box-shadow kutuya gölge verir. Sırasıyla yatay kayma, dikey kayma, bulanıklık, yayılma ve renk değerlerini alır. Başına inset yazarsanız gölge içeride oluşur.

outline kenarlığa benzer ama yer kaplamaz, yani çevresindeki elemanları itmez.

<div style="padding: 16px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);">Yumuşak gölge</div>
<div style="padding: 16px; margin-bottom: 20px; box-shadow: inset 0 0 12px crimson;">İç gölge</div>
<div style="padding: 16px; outline: 3px dashed teal;">Outline yer kaplamaz</div>

<div style="max-width: 300px; padding: 16px; border: 1px solid gray; border-radius: 8px;">Haftanın kitabı</div>

<div style="width: 200px; margin: 0 auto; background-color: gold; text-align: center;">Orta</div>

Bu derste öğrendikleriniz

• width, height ve sınırları kutunun boyutunu belirler.
• padding ve margin bir ile dört arasında değer alır ve saat yönünde okunur.
• Dikey dış boşluklar birleşir, margin: 0 auto kutuyu ortalar.
• border için stil zorunludur, border-radius köşeleri yuvarlar.
• box-sizing: border-box, padding ve border değerlerini genişliğin içine alır.