Jumat, Juli 23, 2021
BerandaTutorial Belajar CSSApa itu CSS Box Model dan Apa Fungsinya

Apa itu CSS Box Model dan Apa Fungsinya

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah “Box Model” digunakan saat membicarakan desain dan tata letak website.
Box model css harus dipelajari karena ini sangat berkaitan dengan desain dari web yang akan kamu buat.

Apa Itu CSS Box Model

Box Model CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Ini terdiri dari: margin, border, padding, dan konten.

Tutorial CSS BOX MODEL
Tutorial CSS BOX MODEL

Penjelasan dari gambar diatas :
Content – tempat untuk menampilkan text atau gambar.
Padding – ruang di area sekitar conten. Padding bersipat transparan.
Border – garis disekeliling content dan padding.
Margin – ruang kosong (spasi) di luar border. Margin itu transparan
Box Model memungkinkan kita menambahkan border di sekitar elemen, dan untuk menentukan ruang antara elemen.
Contoh

dalam contoh diatas saya membuat dua buah box atau kotak, dengan ukuran margin 25px ini membuat jarak dari kotak satu ke kotak dua, border 25px ini untuk garis keliling yang berwarna hijau dan padding yaitu untuk membuat jarak dari tulisan ke ke border. background color untuk warna latar belakang text dalam kotak. width akan saya bahas dibawah.

Property Width dan Height

untuk mengatur lebar dan tinggi element dengan benar disemua browser anda harus tau dulu bagaimana perhitungan nilai width dan height dalam box model.

fungsi width dan height dalam box

fungsi width dan height adalah untuk mengatur lebar dan tinggi area konten. jadi bila anda menerapkan width dan height dalam box untuk mengatur lebar dan tinggi dari elemen dengan css, misalkan nilai width 320px berarti lebar dari boxnya lebih dari 320px, karena kita ada ukuran padding, border dan margin.
Contoh width dan height dalam box css

dalam contoh diatas saya membuat nilai width dari gambar sebesar 350px, element div saya buat widthnya 320px, tapi lebar dari gambar dan box kok sama. ini karena ditambah dengan padding, border dan margin.

Cara menentukan nilai width

nilai width 320px
+ 20px (nilai padding kiri dan kanan)
+ 10px (nilai border kiri dan kanan)
+ 0px (nilai margin kiri kanan)
= 350px
makanya lebar gambar dan box sama lebarnya, karena ada nilai padding border dan margin. untuk menghitung nilai dari height juga sama dengan cara menghitung nilai width.

Info
ingat bawha dalam box css nilai width dan height adalah untuk menentukan lebar dan tinggi dari area konten. bukan lebar dan tinggi dari box itu. kecuali bukan dalam box.

Video Terbaru

RELATED ARTICLES

Apa yang anda pikirkan?

Most Popular