Properti Ukuran kotak gaya
Contoh
Ubah properti boxSizing:
document.getElementById("myDIV").style.boxSizing = "border-box";
Definisi dan Penggunaan
Properti boxSizing memungkinkan Anda untuk menentukan elemen tertentu agar sesuai dengan area dengan cara tertentu.
Misalnya, jika Anda ingin dua kotak berbatas berdampingan, itu dapat dicapai melalui pengaturan boxSizing ke "border-box". Ini memaksa browser untuk merender kotak dengan lebar dan tinggi yang ditentukan, dan menempatkan batas dan bantalan di dalam kotak.
Dukungan Peramban
Property | |||||
---|---|---|---|---|---|
boxSizing | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Kembalikan properti boxSizing:
object.style.boxSizing
Setel properti boxSizing:
object.style.boxSizing = "content-box|border-box|initial|inherit"
Nilai properti
Value | Description |
---|---|
content-box | Default value. This is the behavior of width and height as specified by CSS2.1. The specified width and height (and min/max properties) apply to the width and height respectively of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height |
border-box | The specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified 'width' and 'height' properties |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Detail Teknis
Nilai Bawaan: | kotak-konten |
---|---|
Nilai Kembali: | Sebuah String, mewakili properti ukuran kotak dari suatu elemen |
Versi CSS | CSS3 |
Halaman Terkait
Referensi CSS: properti ukuran kotak
Objek Gaya