Box Model bisa dikaakan juga untuk membuat jarak antara satu dengan yang lainnya, jadi kita bisa memberi jarak ukuran antara kotak satu dengan kotak yang lainnya dengan begitu kotak-kotak kolom tidak tampak menyatu dan hasilnya pasti akan lebih bagus.
Berikut adalah gambaran bentuk box model :
Berikut adalah penjelasannya :
- Margin - Margin berada di luar border dan memungkinkan untuk memberi jarak, background margin Transparant
- Border - Sebuah area batas disekitar margin dan padding, background border bisa kita ganti.
- Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content.
- Content - isi seperti text gambar dll.
Jika kita menggunakan Box Model untuk mengatur tinggi dan lebar pada suatu elemen, misalkan kita akan menggunakan elemen DIV dengan ukuran lebar 250px dan tinggi 150px.
div{
width:250px;
height:150px;
margin:10px;
border:5px solid #000;
padding:5px;
}
Begini cara kerja Box Model :
| Lebar = 250px | + | Batas kiri = (margin:10px + border:5px + padding:5px) | + | Batas kanan = (margin:10px + border:5px + padding:5px) | = 290px |
| Tinggi = 150px | + | Batas kiri = (margin:10px + border:5px + padding:5px) | + | Batas kanan = (margin:10px + border:5px + padding:5px) | = 190px |
Berikut ini adalah contoh untuk menggunakan Box Model :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: LightGoldenRodYellow;
width: 300px;
padding: 25px;
border: 25px solid Lime;
margin: 25px;
}
</style>
</head>
<body>
<div>Ini Adalah Latihan Membuat Box Model</div>
</body>
</html>
Ini Adalah Latihan Membuat Box Model
0 komentar:
Post a Comment