Mengapakah input CSS dengan `width: 100%` melangkaui sempadan induknya?

Input CSS dengan lebar: 100% berada di luar batasan ibu bapa

Model Kotak CSS dan Kegilaan Peratusan Ketakkonsistenan

Dalam bidang CSS, div dan dua anak inputnya nampaknya membebaskan diri daripada batasan yang diperuntukkan. Sihir apakah ini?

Mari kita bongkar misteri ini!

Punca – Sifat Menyimpang Padding

Menurut prinsip model kotak CSS, lebar dan ketinggian elemen bermain bagus dalam kotak kandungan. Walau bagaimanapun, padding suka melangkah ke luar kotak ini, dengan berkesan membesarkan elemen keseluruhan.

Memohon lebar: 100% pada elemen dengan padding memberikan kelonggaran yang tidak wajar, menjadikannya lebih luas daripada 100% induknya. Dalam kes ini, input menjadi lebih lebar daripada bekasnya.

Bersaiz kotak untuk Penyelamat

Untuk menjinakkan tingkah laku nakal padding, kami memperkenalkan sifat bersaiz kotak. Menetapkannya ke kotak sempadan memastikan bahawa padding kekal terhad dalam dimensi yang ditetapkan elemen.

Teknik Warisan Terperinci

Penyihir reka bentuk web Paul Irish dan Chris Coyier menyokong diwarisi pendekatan, disebarkan oleh yang berikut coretan:

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

Demonstrasi

Untuk menyaksikan pembetulan dalam tindakan, berikut ialah kod tweak:

input[type=text],
input[type=password] {
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  background-color: rgb(215, 215, 215);
  line-height: 20px;
  font-size: 12px;
  color: rgb(136, 136, 136);
  border-radius: 2px 2px 2px 2px;
  border: 1px solid rgb(114, 114, 114);
  box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
  box-sizing: border-box;
}

Dan voila! Kini, tiada medan input berani melampaui batasnya. Kewarasan model kotak dipulihkan.

Atas ialah kandungan terperinci Mengapakah input CSS dengan `width: 100%` melangkaui sempadan induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!