Bagaimanakah `box-sizing: border-box` Mempengaruhi Saiz Elemen HTML dengan Sempadan?

Dalam vs. Luar Sempadan

Apabila menggayakan elemen HTML dengan jidar, adalah penting untuk mempertimbangkan di mana sempadan diletakkan berbanding dengan dimensi unsur. Secara lalai, sempadan CSS diletakkan di luar elemen, menambah lebar pada kedua-dua belah.

Mengekalkan Saiz Div dengan Saiz Kotak

Untuk memastikan bahawa dimensi div kekal tidak berubah apabila sempadan ditambahkan, sifat bersaiz kotak akan dimainkan. Menetapkannya ke kotak sempadan termasuk sempadan dalam lebar dan ketinggian elemen yang ditentukan.

Pelaksanaan CSS

Berikut ialah contoh CSS yang menunjukkan kesan kotak- saiz:

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

Dalam contoh ini, div mempunyai sempadan 20px. Tanpa saiz kotak: kotak sempadan, div akan mempunyai jumlah lebar 140px (100px untuk kandungan dan 20px untuk sempadan pada setiap sisi). Walau bagaimanapun, dengan saiz kotak: kotak sempadan, jidar disertakan dalam lebar yang ditentukan iaitu 100px, memastikan lebar sebenar div kekal 100px.

Atas ialah kandungan terperinci Bagaimanakah `box-sizing: border-box` Mempengaruhi Saiz Elemen HTML dengan Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!