Istilah box model ini biasanya digunakan untuk membuat layout pada halaman web, untuk membuat layout web biasanya kita menggunakan tag <div> serta menset beberapa property di CSS seperti :
- Berapa lebarnya(width) ?
- Berapa tingginya (height) ?
- Bagaimana model garis tepinya ?
- Bagaimana Jarak antara 1 box dengan box lain (Margin) ?
- Bagaimana Jarak antara garis tepi dan content (Padding) ?
nah kan mereka saling terkait, untuk lebih memahami konsep penggunaannya perhatikan gambar dibawah ini :
Penjelasan :
- Terdapat 2 objek yang bisa kita ibaratkan sebuah box model yang menata layout dari sebuah web.
- Margin digunakan untuk mengatur jarak 1 obyek dengan obyek yang lain, karena itu diatas kita sebut jarak terluar.
- Border adalah garis yang ada pada objek, yang menjadi pemisah antara margin sebagai jarak terluar, dan padding sebagai jarak dalam.
- Padding adalah jarak dalam dari sebuah objek, padding ini digunakan sebagai jarak antara border dan content yang berada pada objek.
- Content adalah content yang berada dalam box model.
Bagaimana teman – teman apakah bingung ? Jika masih bingung perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box_1{
width: 500px;
height: 300px;
padding: 100px;
border: solid 5px black;
}
#box_2{
width: 700px;
height: 300px;
padding: 10px;
margin: 100px 100px 100px 400px;
border: solid 5px blue;
}
</style>
</head>
<body>
<div id="box_1"><h1>Ini adalah content dalam Box</h1></div>
<div id="box_2"><h1>Ini adalah content dalam Box</h1></div>
</body>
</html>silahkan simpan skrip diatas dengan nama semmisal box_model.html lalu silakan buka di browser.
hasilnya sebagai berikut, penjelasannya adalah seperti ini :
- terdapat 2 objek box model objek satu adalah yang atas, dan objek dua adalah yang bawah, objek pertama menggunakan id box_1 dan objek kedua menggunakan id box_2 yang digunakan untuk link dengan CSS.
- pada objek satu menggunakan border warna hitam karena perintah border:solid 5px black; pada id box_1.
- jarak antara border dan content di objek pertama adalah 100 pixel karena perintah padding:100px; pada box_1.
- pada objek 2 menggunakan border warna biru karena perintah border:solid 5px blue; pada id box_2;
- jarak antara obyek 2 dan obyek 1 bagian atas adalah 100 pixel, dan bagian kiri adalah 400 pixel, karena perintah margin: 100px 100px 100px 400px; di id box_2
- padding pada content obyek 2 adalah 10 pixel karena perintah padding:10px; pada bagian id box_2.
bagaimana teman – teman mudah kan.
Konsep Box model ini digunakan untuk membuat layout dari tampilan web, jadi box model itu perpaduan dari penggunaan tag <div> serta perintah – perintah di CSS seperti width, height, border, padding, dan margin.
Nah sekian dulu teman – teman untuk pembahasan mengenai box model di dalam CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar
Post a Comment (0)