Latest web development tutorials

Ukuran kotak CSS3

CSS3 box-sizing properti untuk mengatur lebar dan tinggi atribut berisi padding (padding) dan perbatasan (border).

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah peramban nomor -webkit- atau awalan-moz ditentukan.

milik
box-sizing 10,0
4.0 -webkit- 		8,0 29,0
2.0 moz 		5.1
3.1 -webkit- 		9.5

Jangan menggunakan CSS3 box-sizing properti

Secara default, lebar dan elemen komputasi cara high-end adalah sebagai berikut:

width (lebar) + padding (padding) + border (perbatasan) = elemen lebar aktual

height (tinggi) + padding (padding) + border (perbatasan) = tinggi sebenarnya dari elemen

Ini berarti bahwa ketika kita mengatur lebar elemen / tinggi, tinggi layar elemen dan lebar akan lebih besar (karena elemen perbatasan dengan bantalan akan menghitung lebar / tinggi di).

Ini adalah sebuah kotak kecil (lebar 300px, tinggi adalah 100px).

Ini adalah sebuah kotak besar (lebar 300px, tinggi adalah 100px).

Kedua elemen <div>, meskipun lebar dan tinggi pengaturan yang sama, tetapi ukuran acara yang sebenarnya tidak konsisten karena div2 bantalan ditentukan:

contoh

.div1 {
width: 300px;
height: 100px;
border: 1px solid biru;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

Coba »

Jika Anda ingin menggunakan metode ini untuk mendapatkan kotak kecil dan berisi dalam margin, Anda harus memperhitungkan perbatasan dan dalam margin lebar.

CSS3 box-sizing properti solusi yang baik untuk masalah ini.

Gunakan CSS3 properti kotak-sizing

CSS3 box-sizing atribut berisi padding (padding) dan perbatasan (border) lebar dan tinggi dari suatu elemen.

Jika Anda mengatur pada elemen box-sizing: border-box; padding (padding) dan perbatasan (border) juga termasuk dalam lebar dan tinggi:

Dua div sekarang ukuran yang sama!

tutorial ini!

Berikut adalah dua elemen <div> ditambahkan box-sizing: border-box; properti dari contoh sederhana.

contoh

.div1 {
width: 300px;
height: 100px;
border: 1px solid biru;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

Coba »

Dilihat dari hasil box-sizing: border-box; hasil yang lebih baik, juga banyak pengembang perlu.

Kode berikut dapat membuat semua elemen dengan cara yang lebih intuitif untuk menampilkan ukuran. Banyak browser sudah mendukung box-sizing: border-box; (tetapi tidak semua - yang mengapa input dan teks elemen mengatur lebar: 100%; lebar pos tidak sama).

Semua elemen menggunakan kotak-sizing lebih dianjurkan:

contoh

* {
box-sizing: border-box;
}

Coba »