Bagaimana untuk Mengekalkan Dimensi Div Tidak Berubah Apabila Menambah Sempadan Dalam?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-12-14 03:49:10

asal

163 orang telah melayarinya

How to Keep a Div's Dimensions Unchanged When Adding an Inner Border?

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;
}

Salin selepas log masuk

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;

Salin selepas log masuk

}

div div {

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

Salin selepas log masuk

}

&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!