CSS Box Model Generator

CSS Box Model Generator merupakan sebuah online tool yang digunakan untuk menghasilkan styling CSS box model, yaitu padding, border, dan margin.

Padding width

Gunakan field padding width ini untuk menentukan seberapa lebar padding yang akan di-generate. Ada empat bagian yang bisa kamu atur seberapa lebar padding-nya, antara lain:

• Top: mengatur padding width bagian atas
• Right: mengatur padding width bagian kanan
• Bottom: mengatur padding width bagian bawah
• Left: mengatur padding width bagian kiri

Semua angka yang diisi pada masing-masing bagian padding width adalah nilai yang memiliki satuan piksel (px).

Masing-masing bagian juga secara default memiliki nilai:

• Top: 4
• Right: 4
• Bottom: 4
• Left: 4

Border width

Field border width digunakan untuk menentukan ketebalan dari border yang akan di-generate. Ada empat bagian dari border yang bisa kamu atur ketebalannya. Bagian yang dimaksud adalah sebagai berikut:

• Top: mengatur border width bagian atas
• Right: mengatur border width bagian kanan
• Bottom: mengatur border width bagian bawah
• Left: mengatur border width bagian kiri

Untuk masing-masing field bagian border width, satuan nilai yang kamu masukkan berupa piksel (px).

Untuk masing-masing field, juga memiliki nilai default berupa:

• Top: 4
• Right: 4
• Bottom: 4
• Left: 4

Margin width

Field margin width ini akan digunakan untuk menentukan kelebaran dari margin. Ada empat bagian margin yang bisa kamu atur seberapa lebar margin-nya. Empat bagian yang dimaksud:

• Top: mengatur margin width bagian atas
• Right: mengatur margin width bagian kanan
• Bottom: mengatur margin width bagian bawah
• Left: mengatur margin width bagian kiri

Sama seperti field lainnya, masing-masing field bagian margin width ini juga memiliki nilai yang bersatuan piksel (px).

Secara default masing-masing bagian margin width bernilai:

• Top: 4
• Right: 4
• Bottom: 4
• Left: 4

Generate

Jika kamu sudah selesai menentukan semua parameter yang diperlukan, silahkan menekan tombol Generate untuk memulai proses.

Preview

Contoh tampilan hasil dari proses yang sesuai dengan parameter yang telah disediakan kemudian ditampilkan di sini.

Code

Selain contoh tampilan, CSS yang digunakan untuk membuat contoh tampilan tersebut juga ditampilkan di sini. Kamu bisa menyalinnya jika dirasa diperlukan.