Setelah di tutorial – tutorial sebelumnya kita telah membahas mengenai apa itu border, padding, margin, dan mengatur width dan height pada css, dalam kesempatan kali ini kita akan membahas mengenai konsep box model pada css, sebenarnya box model ini erat kaitannya dengan apa yang telah kita bahas sebelumnya mengenai border, padding,margin dan width height.
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.