CSS apakah lebar termasuk padding?

146

Tampaknya di IE, lebarnya termasuk ukuran padding. sementara di FF, lebarnya tidak. Bagaimana saya bisa membuat keduanya berperilaku sama?

Terima kasih.

css Jake
sumber
Anda mungkin perlu mengaktifkan mode yang sesuai standar. Namun, tanpa melihat beberapa kode, saya tidak dapat memberi Anda panduan lebih dari itu.
Jeff Hubbard

Jawaban:

307

  • IE dulu menggunakan model kotak "border-box" yang lebih nyaman tetapi tidak standar . Dalam model ini, lebar elemen termasuk padding dan batas. Misalnya:
    #foo { width: 10em; padding: 2em; border: 1em; }
    akan 10emlebar.

  • Sebaliknya, semua browser yang takut standar akan menggunakan model kotak "content-box" . Dalam model ini, lebar elemen tidak termasuk padding atau batas. Sebagai contoh:
    #foo { width: 10em; padding: 2em; border: 1em; }
    sebenarnya akan 16emlebar: 10em+ 2empadding untuk setiap sisi, + 1emperbatasan untuk setiap tepi.

Jika Anda menggunakan versi modern IE dengan markup yang valid , doctype yang baik , dan tajuk yang sesuai akan mematuhi standar. Jika tidak, Anda dapat memaksa browser yang memenuhi standar modern untuk menggunakan "kotak batas" melalui:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Deklarasi pertama diperlukan untuk Opera, yang kedua untuk Firefox, yang ketiga untuk Webkit dan Chrome.

Berikut adalah tes sederhana yang saya buat bertahun-tahun yang lalu untuk menguji deklarasi ukuran kotak yang didukung browser Anda: http://phrogz.net/CSS/boxsizing.html

Perhatikan bahwa Webkit (Safari dan Chrome) tidak mendukung padding-boxmodel kotak melalui pernyataan apa pun.

Phrogz
sumber
2
+1 untuk menyebutkan model kotak konten dan kotak batas. Mungkin ingin menguraikan perbedaan.
BoltClock
1
@BoltClock Terima kasih atas dorongan untuk menjawab lebih keras. Diperbarui.
Phrogz
Jawaban bagus; Saya sudah mencoba untuk mengingat (atau menemukan) nama-nama dari opsi yang berbeda untuk beberapa hari sekarang ... +1 =)
David mengatakan mengembalikan Monica
Tidak ada yang peduli dengan opera.
Michael J. Calkins
3
@whitelettersinblankpapers Lihat mengapa W3Schools menyebalkan dan kemudian referensi yang jauh lebih baik yang mengarahkan Anda ke standar W3C . Jangan ikuti tautan lagi ke W3Schools. Selanjutnya, tambahkan "MDN" ke permintaan mesin pencari Anda tentang standar web di masa depan.
Phrogz
27

Aturan sederhana adalah mencoba menghindari penggunaan properti padding / margin dan width untuk elemen yang sama. yaitu Menggunakan sesuatu yang mirip dengan ini

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>
shankhan
sumber
Saya menggunakan metode ini secara teratur dan tidak pernah memiliki masalah browser lintas dengannya.
Kevin Beal
20

Saya menabrak pertanyaan ini dan meskipun sudah beberapa tahun, saya pikir saya bisa menambahkan ini kalau-kalau ada yang menabrak thread ini.

CSS3 sekarang memiliki properti ukuran kotak. Jika Anda mengatur, katakan,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

kelas Anda akan lebarnya 1000px, bukannya 1030px. Ini, tentu saja, sangat berguna bagi siapa saja yang menggunakan batas seukuran piksel dengan div cair, karena itu memecahkan masalah yang tidak terpecahkan.

Bahkan lebih baik, ukuran kotak didukung oleh semua browser utama kecuali IE7 dan di bawah. Untuk memasukkan semua item dalam dimensi lebar atau tinggi, atur ukuran kotak ke kotak batas. untuk agregat item lain dengan lebar dan / atau tinggi, yang merupakan default, Anda dapat mengatur ukuran kotak menjadi "konten-kotak".

Saya tidak yakin dengan keadaan saat ini tentang sintaks browser, tetapi saya masih menyertakan awalan -moz dan -webkit:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Mason Barge
sumber
Ya, dan Paul Irish memiliki artikel blog yang bagus tentang ini di sini: paulirish.com/2012/box-sizing-border-box-ftw
Dave Burton
Bagaimana jawaban ini memiliki begitu banyak upvotes ketika jawaban yang sama dengan jawaban yang diterima yang ditulis 3 tahun sebelumnya?
dippas
1

Apakah Anda memiliki tipe dokumen yang dideklarasikan? Ketika saya mulai coding html saya punya masalah ini, dan itu dari tidak memiliki DOCTYPE yang dideklarasikan. Favorit saya adalah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>
tybro0103
sumber
1

bagi mereka yang masih memiliki masalah, jQuery menyediakan dua properti outerWidth ()dan innerWitdh ()untuk mengetahui lebar objek dengan atau tanpa batas ...

Patrick
sumber