CSS Box Model
Box Model merupakan cara yang digunakan ketika kita ingin membuat sebuah design dan layout website. Box model menyangkut width, border, padding, content pada setiap element.
Contoh penerapan dan fungsi mengetahui box model css seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
p{
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
<body>
<img src="img.jpg" width="350px" height="200px" alt="gambar_contoh">
<p>Kita akan mengikuti lebar gambar diatas</p>
</body>
</html>
Pada kode diatas maka, gambar memiliki lebar 350px dan element p akan menyamakan lebar gambar dengan rincian sebagai berikut :
width 320px : sebagai lebar utama.
padding 10px : (kanan dan kiri = 20px).
border 5px : (kanan dan kiri = 10px).
320px + 20px + 10px = 350px.
Maka lebar element p akan sama dengan lebar gambar. Hal ini juga bisa diterapkan pada height (tinggi). Penggunaan box model ini sering digunakan untuk design dan layouting. Selamat mencoba...