Merhaba arkadaşlar,
Aşağıdaki örnekte input formların ve submit button'ın widthleri tamamen aynı olmasına rağmen. Chrome'da "İncele" yaptığımda input boxlardaki paddingler width'ten yemiyor fakat submit buttondaki paddingler width'ten yiyor. Sebebini açıklayabilir misiniz lütfen? Kafayı yemek üzereyim ve buna takıldım kaldım daha ileri gidemiyorum bu merakım yüzünden. :D
https://codepen.io/anon/pen/RgqJdE
Teşekkür ederim şimdiden.
Padding Sorunu |
7 Mesajlar | 1.381 Okunma | ||
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
- Üyelik 30.06.2016
- Yaş/Cinsiyet 50 / E
- Meslek Yazılım
- Konum İstanbul Anadolu
- Ad Soyad Y** T**
- Mesajlar 977
- Beğeniler 33 / 388
- Ticaret 45, (%100)
Width den yiyor ne demek, kodlara baktığımda bir sorun göremedim..
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
Width'ten yiyor demek yani width 300 ise paddingler de 10 ise soldan ve sağdan 10 paddingleri alıyor ve asıl element 280 oluyor aşağıdaki örnekteki gibi.
Fakat hepsinin de width'i 300 olarak ayarlı ve göründüğü gibi submit button diğerlerine göre daha kısa.
http://prntscr.com/fu356e
Fakat hepsinin de width'i 300 olarak ayarlı ve göründüğü gibi submit button diğerlerine göre daha kısa.
http://prntscr.com/fu356e
- Üyelik 30.06.2016
- Yaş/Cinsiyet 50 / E
- Meslek Yazılım
- Konum İstanbul Anadolu
- Ad Soyad Y** T**
- Mesajlar 977
- Beğeniler 33 / 388
- Ticaret 45, (%100)
PorFavorDama
Bunun sebebi girdi alanlarının değerlerinin buton alanlarının değerlerinden varsayılan olarak farklı olmasından, aşağıdaki kodu css dosyasına eklersen varsayılanı eşitlersin, istediğin sonucu alabilirsin..
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Bunun sebebi girdi alanlarının değerlerinin buton alanlarının değerlerinden varsayılan olarak farklı olmasından, aşağıdaki kodu css dosyasına eklersen varsayılanı eşitlersin, istediğin sonucu alabilirsin..
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
O zaman bunun sebebi de google chrome'daki user agent style sheet'ten gelen default değerler değil mi?
- Üyelik 30.06.2016
- Yaş/Cinsiyet 50 / E
- Meslek Yazılım
- Konum İstanbul Anadolu
- Ad Soyad Y** T**
- Mesajlar 977
- Beğeniler 33 / 388
- Ticaret 45, (%100)
user agent style değil hocam, browser style.. siz browser ı özelleştirdiyseniz o zaman user agent style diyoruz.. Yani biz paragraf içine yazı yazdığımızda yazının default olarak siyah olması gibi.. Gerçi öyle söylemenizde de bir yanlışlık yok, sonuçta aynı kapıya çıkıyor, ikisi de browser style i..
- Üyelik 20.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek -
- Konum Adana
- Ad Soyad B** K**
- Mesajlar 511
- Beğeniler 152 / 44
- Ticaret 0, (%0)
creed74 Çok teşekkür ederim. :)
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)