CSS Box-Model, Efek Buruk Padding dan Border terhadap Width dan Height

Tabel Konten
  1. Penyimpangan Nilai 
  2. Yang Berbeda dengan Internet Explorer 
  3. Referensi: 

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)
width:200px;
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:

CSS Box-Model
CSS Box-Model
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;

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):
CSS Box-Model Internet Explorer dan Non-Internet Explorer

Ada banyak cara untuk mengatasi itu, misalnya dengan menggunakan conditional comment, atau yang sedikit jahat: IE Hack.

Referensi: 

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 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.

Komentar telah ditutup.