Codingku

box-sizing

Properti CSS box-sizing menentukan bagaimana dimensi elemen dihitung. Properti ini mengubah model kotak CSS yang digunakan untuk menghitung tinggi dan lebar elemen.

Default box model menggunakan content-box, yang berarti bahwa setiap dimensi yang kamu berikan digunakan untuk menentukan ukuran kotak konten saja.

Padding dan border diterapkan di luar kotak konten.

Oleh karena itu, menerapkan lebar 200px dan padding 10px ke suatu elemen akan menghasilkan elemen menempati total lebar 220 piksel. Ini karena padding ditambahkan ke lebar kotak.

Kamu dapat menggunakan nilai border-box untuk mengubah ini, sehingga setiap padding dan border disertakan dalam dimensi tinggi dan lebar.

Dalam hal ini, elemen akan memakan hanya 200 piksel, karena padding ditambahkan ke bagian dalam elemen.

CSS Syntax

box-sizing: content-box | border-box | initial | inherit;

Javascript Syntax

object.style.boxSizing="border-box"

default box-sizing: content-box;

lebar dan tinggi elemen hanya berlaku untuk konten elemen.

Misalnya, elemen ini memiliki:

  • border-width: 12px
  • padding: 30px
  • width: 200px

lebar penuh adalah 24px + 60px + 200px = 284px.

Konten memiliki lebar yang ditentukan. Kotak mengakomodasi dimensi tersebut.

box-sizing: border-box;

lebar dan tinggi elemen berlaku untuk semua bagian elemen: konten, padding dan border.

Misalnya, elemen ini memiliki:

  • border-width: 12px
  • padding: 30px
  • width: 200px

lebar penuh adalah 200px, apa pun yang terjadi.

Kotak memiliki lebar yang ditentukan. Konten mengakomodasi dimensi tersebut, dan akhirnya menjadi 200px - 60px - 24px = 116px.