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 Comments:
pertamaX nih , jadi Padding / margin harus di sesuaikan dengan width/height agar tidak saling menabrak ya.
By
Aeferes / Al Firous, at Wednesday, November 2, 2011 at 4:03:00 PM GMT+7
@Mbah Qopet: Njeh.. njeh..
By
Taufik Nurrohman, at Thursday, November 3, 2011 at 8:18:00 AM GMT+7
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
By
Anonymous, at Thursday, November 3, 2011 at 2:53:00 PM GMT+7
@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.
By
Taufik Nurrohman, at Thursday, November 3, 2011 at 3:26:00 PM GMT+7
saya mah gak ngerti css, jadinya nyimak2 aja yak...
By
Robin PayTren, at Friday, November 4, 2011 at 8:57:00 PM GMT+7
memang gan menurut saya padding itu memang muruk :)
By
Dode Van Persie, at Wednesday, November 30, 2011 at 5:50:00 PM GMT+7
masih belom ketemu css margin yg dari template responsivenya mas :'( udah sebagian tak hapus pula :(
By
Putra, at Sunday, April 8, 2012 at 1:58:00 PM GMT+7
@Alam Perwira Hmmmmhhhh =p*
By
Taufik Nurrohman, at Sunday, April 8, 2012 at 3:33:00 PM GMT+7
@Taufik Nurrohmanpengennya dibuat tanpa sidebar (fullscren postingan) hehe, tpi susaaah :(
By
Putra, at Sunday, April 8, 2012 at 3:50:00 PM GMT+7
@Alam Perwira Hmmmmhhhh =p* *=p
<=) <=) <=)
Sebenarnya elemen blok tidak perlu diberi deklarasi width karena pada dasarnya mereka akan melebarkan dirinya sendiri. Jadi buang saja deklarasi width dari CSS jika hanya ingin menciptakan halaman satu layar penuh. Biasanya ada di #outer-wrapper.
By
Taufik Nurrohman, at Sunday, April 8, 2012 at 6:19:00 PM GMT+7
Post a Comment
<< Home