Mengapakah Input CSS dengan `width: 100%` Melangkaui Bekas Induknya?

Input CSS dengan lebar: 100% Melangkaui Ikatan Ibu Bapa

Anda mungkin pernah menghadapi situasi di mana medan input dengan lebar: 100% melangkaui bekas induknya dalam CSS. Ini berlaku disebabkan oleh cara model kotak CSS mengendalikan padding.

Secara lalai, padding dan margin ditambahkan di atas lebar dan ketinggian elemen. Biasanya, ini bukan masalah. Walau bagaimanapun, apabila elemen mempunyai padding ditambah dan lebar: 100%, padding menolak kandungan di luar sempadan induk.

Untuk mengelakkan ini, kita mesti menukar cara model kotak mengendalikan padding. Saiz kotak sifat CSS membolehkan kami melakukan ini. Dengan menetapkan saiz kotak: kotak sempadan, padding akan disertakan dalam lebar dan ketinggian elemen, menyelesaikan isu dengan berkesan.

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  ...
}

Perubahan ini memastikan bahawa medan input tidak akan melebihi had induknya, walaupun dengan padding digunakan. Ingat untuk menyemak keserasian penyemak imbas untuk saiz kotak.

Atas ialah kandungan terperinci Mengapakah Input CSS dengan `width: 100%` Melangkaui Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!