CSS Box Model

View Categories

CSS Box Model

Semua elemen HTML dapat dianggap sebagai kotak.

CSS Box Model

Dalam CSS, istilah box model digunakan ketika akan membuat desain dan tata letak.

CSS box model pada dasarnya adalah sebuah kotak yang membungkus setiap elemen HTML. Kotak ini terdiri dari margin, border, padding, dan elemen HTML.

Berikut merupakan penjelasaan dari konsep box model dari elemen HTML:

  • Content – Konten, merupakan tempat elemen HTML yang akan ditampilkan
  • Border – Batas atau border adalah garis yang yang mengelilingi konten / elemen HTML
  • Padding – Padding adalah area kosong di sekitar elemen HTML tapi berada di dalam batas/border
  • Margin – Margin adalah area kosong di sekitar elemen HTML tapi berada di luar batas/border

Box Model digunakan untuk visualisasi border di sekeliling elemen dan untuk menentukan ruang antar elemen.

Contoh

Penerapan Box Model:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Mendemonstrasikan Model Kotak (box model)</h2>

<p>Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus setiap elemen HTML. Terdiri dari: border, padding, margin, dan konten sebenarnya.</p>

<div>Teks ini adalah isi kotak. Kontak ini mempunyai padding 50px, margin 20px dan border berwarna hijau sebesar 15px. 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. Kecuali sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body></html>

Jalankan Contoh

Lebar dan Tinggi Elemen

Untuk mengatur lebar dan tinggi elemen dengan benar di semua browser, perlu mengetahui cara kerja box model terlebih dahulu.

Contoh

Berikut elemen <div> akan memiliki lebar dengan total sebesar 350px:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
</style>
</head>
<body>

<h2>Hitung lebar total:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>Gambar di atas lebarnya 350px. Lebar total elemen ini juga 350px.</div>

</body></html>

Jalankan Contoh

Berikut perhitungannya:

Total lebar elemen harus dihitung seperti ini:

Total lebar elemen = width + left padding + right padding + left border + right border + left margin + right margin

Total tinggi elemen harus dihitung seperti ini:

Total tinggi elemen = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Tutorial sebelumnya : Menentukan Lebar dan Tinggi Elemen Dengan CSS
Tutorial setelahnya : CSS Outline
Semua Tutorial CSS : Tutorial CSS

Tinggalkan Balasan