CSS Box-Model, Efek Buruk Padding dan Border terhadap Width dan Height
Penyimpangan Nilai
Perlu Anda ketahui bahwa lebar dan tinggi elemen akan mengalami penyimpangan saat Anda menerapkan padding dan border pada elemen:width:200px;
height:100px;
(tanpa padding/border)
height:100px;
(tanpa padding/border)
width:200px;
height:100px;
padding:10px;
border:2px solid #000;
height:100px;
padding:10px;
border:2px solid #000;
Untuk menyamakan lebar elemen dengan elemen induk, maka Anda harus mengurangi lebar/tinggi elemen sesuai dengan penambahan ketebalan border dan padding:
akurasi lebar elemen = width - (border-left-width + padding-left + padding-right + border-right-width)
akurasi tinggi elemen = height - (border-top-width + padding-top + padding-bottom + border-bottom-width)
Sehingga hasilnya menjadi seperti ini:
width:176px;
height:86px;
padding:10px;
border:2px solid #000;
height:86px;
padding:10px;
border:2px solid #000;
Yang Berbeda dengan Internet Explorer
Internet Explorer memiliki interpretasi yang berbeda terhadap kalkulasi CSS Box-Model. Sebagian besar versi IE akan menerjemahkan gabungan lebar, tinggi dan border sebagai lebar itu sendiri. Berbeda dengan standar W3C yang seharusnya (yang juga telah diikuti oleh browser-browser non-IE seperti Chrome, Opera dan Firefox):
Ada banyak cara untuk mengatasi itu, misalnya dengan menggunakan conditional comment, atau yang sedikit jahat: IE Hack.
10 Komentar
Unknown
pertamaX nih , jadi Padding / margin harus di sesuaikan dengan width/height agar tidak saling menabrak ya.
Taufik Nurrohman
@Mbah Qopet: Njeh.. njeh..
Anonim
Mas, saya nggak ngerti kenapa IE yang selalu buruk dalam menerjemahkan CSS kok selalu diikutsertakan dalam pengembangan website. Toh yang pakai IE juga sedikit. Terus menurut pendapat pribadi, IE itu browser bodoh yang nakal (tidak ikut standar W3C)
Leo Ari Wibowo
http://majuter.us
Taufik Nurrohman
@leoaw: Saya juga kurang tahu. Tapi mungkin karena IE adalah browser yang terintegrasi dengan softwarenya, jadi agak susah untuk mengikuti standar. Bisa dilihat bahwa properti-properti pada Internet Explorer lebih tampak sebagai semacam script internal dibandingkan sebagai CSS.
Robin PayTren
saya mah gak ngerti css, jadinya nyimak2 aja yak...
Dode Van Persie
memang gan menurut saya padding itu memang muruk :)
Putra
masih belom ketemu css margin yg dari template responsivenya mas :'( udah sebagian tak hapus pula :(
Taufik Nurrohman
@Alam Perwira Hmmmmhhhh =p*
Putra
@Taufik Nurrohmanpengennya dibuat tanpa sidebar (fullscren postingan) hehe, tpi susaaah :(
Taufik Nurrohman
@Alam Perwira Hmmmmhhhh =p* *=p
<=) <=) <=)
Sebenarnya elemen blok tidak perlu diberi deklarasi
widthkarena pada dasarnya mereka akan melebarkan dirinya sendiri. Jadi buang saja deklarasiwidthdari CSS jika hanya ingin menciptakan halaman satu layar penuh. Biasanya ada di#outer-wrapper.