Bu yazımda CSS’de kutu modelini, margin, padding ve border özelliklerini detaylı anlatmaya çalışacağım. O halde başlayalım.
Diğer derslerimde div elemanlarının block-eleman olduğundan bahsetmiştik. Şuradan o yazıma ulaşabilirsiniz. Div elemanları ile sitemizde kutu modelleri oluşturabilir, bu kutu modellerinin içten, dıştan alabileceği boşlukları, diğer elemanlarla aralarındaki mesafeyi ve kutu kenarlıklarına kalınlık değeri vermeyi ve renklendirmeyi konu alacağım.
CSS Margin Özelliği
Öncelikle bir elemanın bir başka eleman ile aralarında boşluk olmasını istiyorsak margin özelliğimiz devreye giriyor. En basit kullanımıyla bir div elemanına margin özelliğini şu şekilde atarız:
div { margin:50px;
}Yukarıdaki kodda ne dedik? Oluşturduğumuz div elemanına yukarıdan, aşağıdan, sağdan ve soldan 50 piksel değerinde boşluk oluştur dedik.
Resimde de gördüğünüz üzere div elemanımız kendine en yakın elemanlardan bütün yönlerde (yukarı, aşağı, sağ ,sol) boşluk bırakarak kaydı.
Margin özelliğinin en yalın halini aktardık. Diğer gösterimleri de şu şekildedir:
margin-top (üstten boşluk)
margin-right (sağdan boşluk)
margin-bottom (alttan boşluk)
margin-left (soldan boşluk)Tek bir yönden boşluk verilmesini istiyorsak yukarıdaki kodlardan hangi yönde boşluk verecekseniz onu kullanabilirsiniz.
Bütün hepsinin tek bir kod satırında kullanımı da şu şekildedir:
div { margin: 30px 50px 10px 80px;
}Saat yönünü baz alıp 30px yukarıdan, 50px sağdan, 10px aşağıdan, 80px ise soldan boşluk bırakılacağı anlamına gelir.
Ayrıca şu şekillerde de kullanımları vardır:
.div1 { margin: 20px 10px 30px;
}
.div2 { margin: 25px 50px;
}div1 sınıfına atadığımız margin özelliğinde 3 değer verildiğini görüyorsunuz. Bu durumda da yukarıdan 20px, sağdan ve soldan 10px, aşağıdan da 30px boşluk bırak denilmektedir. div2 sınıfındaki ikili değerde de 25px yukarıdan ve aşağıdan, 50px de sağdan ve soldan boşluk bırak anlamına gelmektedir.
div {margin:0 auto;
}Son olarak bu kullanım da yukardan aşağıdan
Margin özelliğinin kafanızda oturduğunu varsayarak padding özelliğine geçiyorum.
CSS Padding Özelliği
Kaba bir tanımlama yapacak olursak margin özelliğine dışardan boşluk, padding özelliğine ise içerden boşluk diyebiliriz. Yine örnek kod ve resimlerle gidip anlatımı kolaylaştırmaya çalışalım. Özellik ve değer yazım şekli aynı margin gibidir. Tekrar tekrar yazmaya gerek yok diye düşünüyorum. Topluca aşağıya örnek yazımlarını vericem.
div { padding:40px;
}Bir div elemanı oluşturduğumuzu ve bu elemanın padding özelliğine 40px değer atayalım. Bu durumda margin özelliğindeki gibi 40 px kendine en yakın elemandan uzaklaşmayacak, bu değeri div elemanı kendi içerisinden verecek. Örnek resmi bırakıyorum.
Örnek resmimizde görüldüğü gibi bir div elemanına padding verirsek bir altındaki kapsadığı elemanla arasında atadığımız piksel kadar boşluk bırakır. Padding özelliğinin diğer kullanımlarını da topluca yazıyorum. Marginden hiçbir farkı yoktur.
div {
padding-top: 30px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 75px;
}div {
padding: 10px 20px 10px 30px;
}div {
padding: 30px 40px 20px;
}div {
padding: 30px 60px;
}Buraya kadar umarım herşey anlaşılmıştır. Kısaca ne diyoruz: Margin dışardan boşluğumuz, padding ise içerden boşluğumuzdur. O halde geçelim border özelliğimize.
CSS Border Özelliği
Kutu modellerimize dışardan ve içerden nasıl boşluk vereceğimizi anlattık. Şimdi gelelim kutumuza kenarlık oluşturup ona genişlik ve renk vermeye.
Yukarıdaki resmi komple kutu olarak düşünürsek border özelliğimiz de kenarlarındaki kalınlıktır diyebiliriz. Biz kutumuza istediğimiz gibi genişlik, renk ve stiller (ovallik, çizgi çeşitleri vs.) uygulayabiliriz. Detaylandıralım…
Border özellikleri genel itibari ile şunlardır:
- border-style
- border-width
- border-color
- border-radius
Hadi bunları tek tek açıklayalım.
border-style özelliği
Kenarlık stilleri için border-style özelliği kullanılır. border-style özelliğinin alabileceği değerler şunlardır:
- dotted – Noktalı çizgi
- dashed – Kesik çizgilerden oluşan çizgi
- solid – Düz çizgi
- double – Çift çizgi
- groove – 3 boyutlu oluklu çizgi.
- ridge – Çıkıntılı çizgi.
- inset – İçe doğru 3 boyutlu görünen çizgi.
- outset – Dışa doğru 3 boyutlu çizgi.
- none – Kenar çizgisi yok
- hidden- Gizli kenar çizgisi
Örneğin bir paragrafa kenarlık vermek istersek;
p {border-style: solid;
}şeklinde yapabiliriz.
border-top-style, border-right-style, border-left-style, border-bottom-style özellikleriyle yön belirterek sadece o yöne stilin uygulanması da mümkündür.
border-width özelliği
Kenarlık çizgimizin kalınlığıdır diyebiliriz. Genişliği ne kadar fazla piksel verirsek o kadar kalın çerçeveli kapsayıcımız olacaktır.
Örneğin;
p {
border-width: 2px;
}border-top-width, border-right-width, border-left-width, border-bottom-width özelleştirilmiş şekilde de kullanılabilir.
border-color özelliği
Kenarlığımıza renk verir. Örnek kullanım;
p{
border-color: red;
}Aynı şekilde border-top-color, border-right-color, border-left-color ve border-bottom-color özelleştirmesiyle de kullanılabilir.
border-radius özelliği
Kenarlık köşelerine ovallik verir. Örnek kullanım;
div {border-radius: 10px;
}şeklindedir. Başka kullanım şekilleri de vardır.
div {border-radius:20px 10px;
}Sol üst ve sağ alta 20 px, sağ üst ve sol alta 10px radius değeri vermiş oluruz.
div {border-radius:20px 10px 15px 30px;
}Saat yönünde düşünebiliriz. Sol üstten 20px, sağ üstten 10px, sağ alttan 15px, sol alttan 30px radius değeri verilir.
Border özelliğinin kısaltılmış örnek kullanımı da şu şekildedir:
div {border:1px solid green;
}Şimdi de bildiklerimizi derleyip border değerini kod içerisinde kullanıp önizlemesini verelim.
<!DOCTYPE html>
<html>
<head>
<style>
p.kenarlik {
border-style: solid;
border-color: red;
border-width: 10px;
border-radius: 15px;
}
</style>
</head>
<body>
<p class="kenarlik">Bu paragrafa border özellikleri verilmiştir.</p>
</body>
</html>Önizlememiz şu şekilde olacaktır.
Gördüğünüz üzere solid değeri ile düz çizgimiz oluşmuş, red değeri ile kırmızı rengini almış, kenarlık genişliğimiz 10 px ve köşelerden ovallik değeri ise 15 px değerini almıştır.
Bloğumda bu yazım da buraya kadardı. Biraz uzun oldu. Çok emek harcayarak, zaman ayırarak yazıyorum. Eksikliklerim olabilir, affola şimdiden.
