CSS Layouting # Box model : Konsep

bySetyo Wibowo ID - 0

 


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)

أحدث أقدم