Saiz kotak CSS3
Hartanah
CSS3 box-sizing boleh menetapkan sifat lebar dan ketinggian, yang termasuk padding (padding) dan sempadan (sempadan).
Sokongan Penyemak Imbas
Nombor dalam jadual menunjukkan nombor versi penyemak imbas pertama yang menyokong atribut ini.
-webkit- atau -moz- serta-merta mengikut nombor ialah awalan penyemak imbas yang ditentukan.
Tidak menggunakan sifat bersaiz kotak CSS3
Secara lalai, lebar dan tinggi elemen dikira seperti berikut:
lebar(lebar) + pelapik(lapik) + sempadan(sempadan) = lebar sebenar elemen
tinggi(tinggi) + pelapik(lapik) + sempadan( sempadan) ) = ketinggian sebenar elemen
Ini bermakna apabila kita menetapkan lebar/tinggi elemen, ketinggian dan lebar elemen sebenar yang dipaparkan akan menjadi lebih besar (kerana sempadan dan padding elemen juga akan dikira dalam lebar/tinggi). 
Walaupun tetapan lebar dan ketinggian bagi dua elemen <div> di atas adalah sama, saiz sebenar yang dipaparkan tidak konsisten kerana div2 menentukan pelapik:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Gunakan kaedah ini jika anda ingin mendapatkan yang lebih kecil Jika kotak mengandungi padding, anda perlu mengambil kira lebar sempadan dan padding. Atribut
CSS3 box-sizing menyelesaikan masalah ini dengan baik.
Gunakan sifat bersaiz kotak CSS3
sifat CSS3 box-sizing termasuk padding (padding) dan jidar (sempadan) dalam lebar dan ketinggian sesuatu elemen.
Jika box-sizing: border-box; ditetapkan pada elemen, padding (padding) dan sempadan (sempadan) turut disertakan dalam lebar dan tinggi: 
Berikut ialah contoh mudah untuk menambahkan atribut box-sizing: border-box; kepada dua elemen <div>
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网!</div>
</body>
</html>Run instance »
Klik butang "Run Instance" untuk melihat instance dalam talian
Berdasarkan keputusan box-sizing: border-box; kesannya adalah lebih baik, itulah yang diperlukan oleh ramai pembangun.
Kod berikut boleh memaparkan saiz semua elemen dengan cara yang lebih intuitif. Ramai pelayar sudah menyokong box-sizing: border-box; (tetapi bukan semua - inilah sebabnya
Elemen input dan teks mempunyai lebar yang berbeza selepas menetapkan lebar: 100%;).
Adalah disyorkan untuk menggunakan saiz kotak untuk semua elemen:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="action_page.php">
用户名:<br>
<input type="text" name="username" value="php"><br>
邮箱:<br>
<input type="text" name="email" value="429240967@qq.com"><br>
评论:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p>
</body>
</html>Jalankan instance»
Klik butang "Jalankan Instance" untuk melihat contoh dalam talian
