css ile nasıl kutu modelleyebiliriz, şimdi size bundan bahsedeceğim.
Border: kenar çizgisi, bordere vereceğiniz değerler border kalınlığını belirler, border alabileceği değerler: kalınlık, çizgi şekli, renk. Konuyla ilgili detaylı bilgiyi border konusundan bakabilirsiniz.
Border: bütün kenarlara çizgi uygular.
Border-left: sol kenara çizgi uygular.
Border-right: sağ kenara çizgi uygular.
Border-top: üst kenara çizgi uygular.
Border-bottom: alt kenara çizgi uygular
border:10px 20px: üst ve alt çizgi kalınlığı10px, sağ ve sol çizgi kalınlığı 20px olacaktır.
Border:1px 0 5px 2px: üst çizgi kalınlığı 1px, sağ çizgi yok, alt çizgi kalınlığı 5px, sol çizgi kalınlığı 2px olacaktır. Tabi çizgi şekli ve kalınlığı atamayada unutmamak gerekiyor.
Width ve height: orta alan genişliğini belirler. Width değeri vermediğiniz durumlarda kutu o anki alanın boşluğunu kaplayacak kadar sağa doğru uzayacaktır. Height değerini vermediğinizde ise kutuya eklediğiniz içerik kadar yükseklik değeri alacaktır.
padding: orta alan ile kenar çizgisi arasındaki boşluğu belirler bu alana yazı veya resim gibi herhangi bir şey eklenemez, border için vereceğiniz değer width ve height değeri üzerine eklenir,
padding: bütün kenar boşlukları
padding-left: sol kenar boşluğu
padding-right: sağ kenar boşluğu
padding-top:üst kenar boşluğu
padding-bottom: alt kenar boşluğu
padding:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
padding:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.
Margin: kenar çizgisi veya kenar çizgisi kullanılmayan durumlarda kenar sınırı ile kutu etrafında bulunan başka etiketlerle olan boşluğu belirler,
margin: bütün kenar boşlukları
margin-left: sol kenar boşluğu
margin-right: sağ kenar boşluğu
margin-top: üst kenar boşluğu
margin-bottom: alt kenar boğluğu
margin:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
margin:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.
css kodu
.kutu {
background-color:yellow;
width: 100px;
padding: 50px;
border: 50px solid red;
margin: 50px;
}
html kodu
<div class="kutu"> kutu </br> kutu </br> kutu </br> kutu </div>
çalışmalara ait örnek link:
0 yorum:
Yorum Gönder