Box Model CSS
Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah “box model” digunakan untuk desain dan tata letak website kita.
Box model CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Box model ini terdiri dari: margin, border, padding, dan konten .
Penjelasan bagian konten, sebagai berikut:
Content – Konten kotak, tempat teks dan gambar muncul
Padding – Menghapus area di sekitar konten. Paddingnya transparan
Border – Batas yang mengelilingi padding dan konten
Margin – Membersihkan area di luar perbatasan. Marginnya transparan
Model kotak memungkinkan kita untuk menambahkan batas di sekitar elemen dan untuk menentukan ruang antar elemen.
Contoh
Demonstrasi model kotak:
<!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } </style> </head> <body> <h2> Mendemonstrasikan Box Model </h2> <p> Model kotak CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Ini terdiri dari: border, padding, margin, dan konten sebenarnya. </p> <div> Teks ini adalah isi kotak. kita tambahkan padding 50px, margin 20px dan border hijau 15px. lorem ipsum....</div> </body> </html>
Lebar dan Tinggi Elemen
Untuk menyetel lebar dan tinggi elemen dengan benar di semua browser, kita perlu mengetahui cara kerja box model.
Penting: Saat kita akan mengatur properti lebar dan tinggi dari sebuah elemen dengan CSS, kita bisa mengatur lebar dan tinggi dari area konten. Untuk menghitung ukuran penuh sebuah elemen, kita juga harus menambahkan padding, border, dan margin.
Contoh
Elemen ini akan memiliki lebar total 350px:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Menghitung lebar elemen:</h2>
<img src="https://dosenit.com/wp-content/uploads/2020/10/259631.jpg" width="350" height="263" alt="SAO">
<div>Gambar di atas lebarnya 350px. Lebar total elemen ini juga 350px.</div>
</body>
</html>
Berikut perhitungannya: 320px (lebar)
20px (padding kiri + kanan)
10px (border kiri + kanan)
0px (margin kiri + kanan)
= 350px
Lebar total elemen harus dihitung seperti ini:
Lebar elemen total = lebar + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan
Tinggi total elemen harus dihitung seperti ini:
Tinggi elemen total = tinggi + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah
