Apa itu CSS Box Model dan Apa Fungsinya

CSS Box Model

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

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  background-color: lightgrey;
  width: 300px;
  padding: 25px;
  border: 25px solid green;
  margin: 25px;
  }
  </style>
  </head>
  <body>
  <h2>Contoh Box Model CSS</h2>
  <p>Box model digunakan untuk membuat kotak pada element HTML</p>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
  </html>

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

<!DOCTYPE html>
  <html>
  <head>
  <style>
  div {
  width: 320px;
  padding: 10px;
  border: 5px solid red;
  margin: 0;
  }
  </style>
  </head>
  <body>
<h2>Perhitungan Nilai width:</h2>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/07/pengertian-tag-element-atribut-html.jpg" 
width="350" height="263" alt="Klematis">
  <div>Gambar diatas ukurannya 350px. elemen ini juga 350px.</div>
</body>
</html>

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.

Keyword:

  • apa itu box model css
  • apa itu width

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas