CSS Kodlamaya Giriş –2

css-kodlamaDaha ö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;
}


Eşleştirilen İçeriklere Göz Atın

Emrah

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.

Bunları da sevebilirsiniz

Yorum Yap