CSS 20 Kasım 2009

CSS Kodlamaya Giriş –2

\"css-kodlama\"Daha önce burada yazı dizimize başlangıç yapmıştık.

1. Padding & Margin

Yeni başlayanlar padding ve margin etiketlerini karıştırabilir veya yanlış kullanabilirler. Öncelikle tanımlarını yapayım.

Padding: Elemanın kenar içi boşluğudur.

Margin: Elemanın kenar dışı boşluğudur.

Daha kolay anlayabilmek için aşağıdaki görsele göz atın:

\"1_a\"

Şimdi, kafanızda daha net şekillenmiştir. Gelelim padding ve margin değerlerinin nasıl verileceğine… Bunun için aşağıdaki görsele göz atın:

\"1_c\"

ÖRNEK: <h2> etiketli ile biçimlendirilmiş bir başlık ve gördüğünüz gibi margin ve padding, paragraflar arasında boşluk oluşturmuş.

\"1_b\"

Margin ve Padding Değerleri

Yukarıdaki örnek görseli inceleyelim. Buradaki başlığın, margin ve padding değerleri şunlar olacak:

margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

Bu kod satırını daha iyi optimize edebiliriz: Şöyle ki:

margin: 15px 0;  / *-- üst ve alt = 15px | sağ ve sol = 0 --* /
padding: 15px;  / *-- üst, sağ, alt ve üst = 15px --* sol /

Bu başlık için tam olarak CSS kodlamasını şöyle yazabiliriz:

h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}


Bunu da Oku:  Özel CSS Cursor

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

BUNLARI DA OKUYUN

Yapılan Yorumlar (1)

Yorum Yap