Bagaimana untuk Mengekalkan Dimensi Div Tidak Berubah Apabila Menambah Sempadan Dalam?

Bagaimana untuk Meletakkan Sempadan Di Dalam Div Tanpa Memanjangkan Dimensinya?

Apabila menggayakan

elemen dengan sempadan, tingkah laku lalai adalah untuk menambah ketebalan sempadan pada kedua-dua lebar dan ketinggian elemen. Walau bagaimanapun, anda mungkin menghadapi senario di mana anda mahu sempadan muncul dalam dimensi sedia ada div.

Untuk mencapai kesan ini, anda boleh menggunakan sifat bersaiz kotak dan menetapkannya kepada kotak sempadan:

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

Dengan menetapkan saiz kotak kepada kotak sempadan, lebar dan ketinggian div akan termasuk ketebalan sempadan, memastikan kotak yang kelihatan kekal sama saiz semasa sempadan muncul di dalam tepinya:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;

}

div div {

box-sizing: border-box;
border: 10px solid red;

}

&l t;div>Hello!

Hello!

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Dimensi Div Tidak Berubah Apabila Menambah Sempadan Dalam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!