CSS Kutu Modeli – Padding Özellikleri
Padding içerik alanı ile kenarlık arasındaki alandır.
padding-top
Yapısı : padding-top: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-top özelliği içerik alanı ile üst kenarlık arasındakimesafeyi belirler.
h2 {
padding-left: 0.25in;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
padding-right
Yapısı : padding-right: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-right özelliği içerik alanı ile sağ kenarlık arasındakimesafeyi belirler.
h2 {
padding-right: 0.25in;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
padding-bottom
Yapısı : padding-bottom: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-bottom özelliği içerik alanı ile alt kenarlık arasındakimesafeyi belirler.
h2 {
padding-bottom: 0.25in;
}
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
padding-left
Yapısı : padding-left: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
padding-left özelliği içerik alanı ile sol kenarlık arasındakimesafeyi belirler.
h2 {
padding-left: 0.25in;
}
Internet Explorer 4+
Netscape 4+
Opera 4+
W3C’s CSS Level 1+
CSS Profile 1.0
padding
Yapısı : padding: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde>{1,4} | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok
padding özelliği padding-top, padding-right, padding-bottomve padding-left değerlerini kısayoldan atamak için kullanılır.
h1 {
padding: 10px;
background-color: silver;
}
margin‘deki gibi farklı kullanım şekilleri mevcuttur.
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0
hocam sen harikasın.Mükemmel anlatımlar.
[...] uygulanmış alan aşağıda mor ile renklendirilmiştir… bkz.(Kutu Modeli – Padding Özellikleri) sonraki adım ise fare üzerine menü üzerine geldiğimizde gerçekleşecek olaydır. hover [...]
margin ve paddingleri sıfırlamayı dene
geniliği 230 px, yüksekliği ise içeriğe göre yükselen bir div2im var. Yani style olarak bir değer atanmadı. Fakat Explorer padding verildiği için div'in dışarısınada ekliyor bu yüksekliği, firefox, opera, safari ve chrome da bir sorun yok. Bunun önüne nasıl geçebilirim? Acil çözüm bulabilen bir arkadaşım var mıdır?
fatih bey oradakileri uygulamaya çalıştım fakat yine olmadı. inline olarak yazıyorum fark edermi?
http://www.fatihhayrioglu.com/kutu-modeli-sorunlari-ve-cozumleri
çözümü mevcut
evet ibrahim beyin söylediği hata firefoxda oluşuyor. padding değerini atadığımızda kutu genişlik ve yükseklik değerine etki ediyor. bende bu sorundan yakınıyorum. bunun bir çaresi varmı. ie de ise kutu üzerinde etkisi yok. hangisi doğru çalışıyor. ie mi firefoxmu? hata hangisindeyse nasıl çözebiliriz :S
@ibrahim
http://www.fatihhayrioglu.com/?p=13
inceleyin
hocam,
600×200 px ölçülerini verdiğim bir kutumda padding değerlerini “padding: 30px 0px 0px 10px;” gibi koydum. Kutumun ölçüleri style dosyamda değiştirmediğim halde dışarıya bir taşma oluyor. Örneğin paddin-top değeri 30px ise benim kutum aşağıya doğru 30px açılmış oluyor. Sebebi nedir ve nasıl çözebilirim?
Ben de elimden geldiğince bir şeyler anlatmaya çalıştım : http://ugursamsa.ugurs.com/padding-ve-margin/
Fatih hocam eksik varsa belirtirseniz sevinirim.