Web 
Margin & Padding Nedir? Nasıl Kulllanilir?
Arkadaslar Bugün Css de Çok önemli bir kod olan padding ardindan Marginin Ne Olduğunu ve Nasıl Kullanildiğini Göstericem.Bununla İlgili Olarak Reklam arkaplani ve alanı Kodlama Dersini Hazırlamıstık.Bu Dersdede Bu kodlari Kullanmiştik.Padding Ve Margin Nedir? Aralarindaki Fark Nedir?
Arkadaslar Bir Katman Düsünün bu Katmanin içeriğini katmanin her noktasina,Önünde Bir Engel Olmadiği Sürece götürebiliriz.İşte Bu İşlem Padding Kodu Sayesinde Yapiliyor.Margin Kodu İse Katmanin Bulunduğu sayfanin yine önünde bir engel olmadiği sürece her noktasina getirebiliriz.Buda Margin Kodu Sayesinde Yapiliyor.
Aşağıdaki Kırmızı Alani Katmanin Bulunduğu sayfa mavi alanida katman olarak kabul edersek.Kodumuz Su Sekilde olur.
#katmanadi {
margin-left:2px;
padding-top:5px;
padding-left:3px;
}Margin-left:2px; dedik ve katmanimizi bulunduğu kısımdan 2px sağa aldik.Padding-top:5px; dedik ve katmanimizdaki içeriği 5px; aşağı aldık.Aynı sekilde padding-left:3px; dedik ve içeriği 3px sağa aldik.
Padding Kodunu Kullanirken Neye Dikkat Etmeliyiz.
Arkadaslar Boyutlari belli bir katmanin içeriğinin konumunu oynatmak istiyorsak.Yapicağımız İşlemler var.Örneğin tasarimlarda photoshopta çizdiğimiz resimleri arkaplan olarak katmanimiza veriyoruz.500px; genisliği olan bir katmana haliyle 500px boyutunda bir arkaplan veriyoruz.İçeriğin konumu değistirmek için padding-left:5px; yaptık.Bu sayede katmanin boyutunu 500px+5px=505px olarak arttirdik.Ve Haliyle bu boyuta uymayan arkaplan resmimiz sağ tarafa doğru açildi ve kendini tekrar etmeye basladi.Bunu Engellemek İçin.Width Değerleri için padding left veya right'a verdiğimiz değeri width değerinden Çıkartıyoruz.Width 500px olan bir katmanin içeriğini 5px; sağa itmek için Width değerini padding-left değerinden çıkartıyoruz.Aynı Şekilde height değeri 500px olan bir katmanın içeriğini bulunduğu konumdan aşağı doğru itmek için padding-top değerini height değerinden çıkartıyoruz.Bu olayi daha iyi kavramak için Reklam Arkaplani ve Alani kodlama dersini Okumanizi Öneririm.
Padding Ve Margin Kodlari
Arkadaslar Normalde Padding'e veya Margin'e vericeğimiz bir 5px değeri katmanin veya içeriğin Aşağıdan ve Yukaridan,Sağdan ve Soldan Eşit bir sekilde 5er px uzaklaşmasi anlamina gelir.Ama Biz sağdan uzaklaşirken soldan uzaklaşmasini istemiyorsak.Bunun için yukarida bahseddiğim right,left,top,bottom kodlarini kullanicaz.
Genislik (Width) İle Alakali Olanlar
Margin-Left => Katmanin Sayfanin Sol Kısmından Uzakliği
Margin-Right => Katmanin Sayfanin Sağ Kısmından Uzakliği
Padding-Left => Katman İçeriğinin Katmanin Sol Kısmından Uzakliği
Padding-Right => Katmanin içeriğinin katmanin Sağ kısmından uzakliği
-Unutmayiniz ! Padding Right ve Left Width Değerinden Çıkarılıcak. Sonuç Yeni Width Değeri Olarak Yazılacak
Uzunluk (Height) İle Alakali Olanlar
Margin-Top => Katmanin Sayfanin Üst Kısmından Uzakliği
Margin-Bottom => Katmanin Sayfanin Alt Kısmından Uzakliği
Padding-Top => Katman İçeriğinin Katmanin Üst Kısmından Uzakliği
Padding-Bottom => Katmanin içeriğinin Katmanin Alt kısmından uzakliği
-Unutmayiniz ! Padding top ve bottom Height Değerinden Çıkarılacak.Sonuç Yeni Height Değeri Olarak Yazılacak
Margin Kodumuza Örnek Olarak HackerFriend adresinin yayınlamış olduğu Tablo Ortalama Kodunu verebiliriz.
table{Margin-Left:auto;Margin-Right:auto;}Kodu Kullanilmiş.Bu demek oluyorki sitemdeki tablolari sağdan ve soldan eşit bir şekilde ortala.Dikkat Bu Kod aşağı ve yukari ortalamada kullanilmaz.Bu Başka bir Kodlama Dilinde Yapilabilir.
Bu Ders Ali Mengü Tarafindan Hazırlanmıştır.Sorusu,Şikayeti,Önerisi Olan Yorum Kısmını Kullanabilir.
İligili Sayfalar
Reklam Arkaplani ve Alani Kodlama
Bu sayfa hakkındaki son yorum:
|
xD
Bu sayfa hakkında yorum ekle:
Anasayfa