Iklan bawah header

Belajar CSS : Konsep Box Model pada CSS

Box model

Sebelumnya kita sudah pernah membahas mengenai apa itu border, margin, padding dan mengatur height dan width pada css, dalam pembahasan kali ini kita akan membahas mengenai konsep box model pada css, konsep box model ini erat kaitannya dengan apa yang sudah dibahas sebelumnya mengenai border, margin, padding dan width height.

Istilah box model sendiri biasanya digunakan dalam membuat layout pada halaman web. Untuk membuat layout web biasanya kita menggunakan tag <div> serta dengan menambahkan beberapa property di css seperti width, height, border, margin dan padding.

Untuk lebih memahami konsep penggunaan box model, bisa kalian perhatikan gambar dibawah ini :

Konsep box model

Dari gambar diatas, terdapat 2 obyek yang disa diibaratkan sebagai sebuah box model yang menata layout dari sebuah web. Margin digunakan untuk mengatur jarak obyek yang satu dengan yang lainnya, karena itu kita sebut sebagai jarak terluar.

Border adalah garis yang ada pada obyek, 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.

Jika masih bingung, bisa perhatikan contoh berikut ini :

<!DOCTYPE html>
<html>
<head>
	<title>box model</title>
<style type="text/css">
	#box1{
		width: 500px;
		height: 300px;
		padding: 100px;
		border: solid 5px black;
	}
	#box2{
		width: 700px;
		height: 300px;
		padding: 10px;
		margin: 100px 100px 100px 400px;
		border: solid 5px blue;
	}
</style>
</head>
<body>
<div id="box1"><h1>Ini adalah content dalam Box</h1></div>
<div id="box2"><h1>Ini adalah content dalam Box</h1></div>
</body>
</html>
Box model

Pada gambar diatas terdapat 2 objek box model, objek yang pertama adalah yang atas, dan objek yang kedua adalah yang bawah, objek pertama menggunakan id box1 dan objek kedua menggunakan id box2.

Pada objek pertama menggunakan border warna hitam karena perintah border: solid 5px black; pada id box1. jarak antara border dan content di objek pertama adalah 100px karena perintah padding: 100px; pada box1.

Pada objek kedua menggunakan border warna biru karena perintah border:solid 5px blue; pada box2. jarak antara objek 2 dan objek 1 bagian atas adalah 100 px, dan bagian kiri adalah 400px, karena perintah margin: 100px 100px 400px; di id box2.

padding pada content objek 2 adalah 10px karena perintah padding:10px; pada bagian id box2.

Demikianlah pembahasan mengenai konsep box mode pada CSS. Semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel