Box Model merupakan istilah pada CSS untuk mendeskripsikan suatu desain dan tata letak elemen HTML pada halaman web. Di dalam CSS, semua elemen HTML akan dianggap sebagai sebuah box atau kotak. Pada dasarnya box model ini adalah sebuah elemen kotak yang membungkus elemen HTML yang terdiri atas margin, padding, border dan konten itu sendiri.
Pada suatu halaman HTML yang sederhana, biasanya terdiri atas beberapa buah elemen HTML. Baik itu dalam bentuk <div>, <p>, <span> atau <img>. Konsep box model akan sangat membantu dalam menata elemen-elemen HTML tersebut, sehingga tata letaknya tidak akan tumpang tindih satu dengan lainnya. Konsep box model akan mengkotakkan satu elemen dengan lainnya sesuai dengan ukuran jarak pada margin, padding dan konten itu sendiri.
Pada gambar box model di atas, materi penyusun elemen HTML terlihat seperti kotak atau box. Pada kotak tersebut tersusun 4 buah lapisan (layer). Dimulai dari intinya yang berada pada titik paling tengah terdapat konten atau isi, padding, border dan terakhir adalah margin.
Konsep box model digunakan untuk menata suatu konten sehingga tiap-tiap elemen pada halaman HTML dapat tersusun berdampingan dengan jarak yang sudah ditentukan. Untuk menata elemen HTML tersebut, menggunakan beberapa property CSS yang melekat pada setiap elemen HTML saat elemen tersebut diciptakan.
Konten atau isi - merupakan daerah konten akan ditempatkan dan konten akan terletak pada bagian paling tengah. Konten dapat berisi teks atau paragraf ataupun gambar.
Padding - merupakan daerah atau jarak antara konten dengan garis tepi atau border. Pada paragraf normal dengan ukuran huruf 16px, secara default akan memiliki padding sebesar 5px. Jika ukuran padding dihilangkan atau diatur dengan lebar 0px, akan terlihat jelas perbedaannya. Huruf akan menyentuh garis tepi border. Padding di sini berguna agar teks tidak menyentuh sisi dalam dari tepi garis luar elemen. Padding bersifat transparan dan tidak terlihat.
Border - adalah garis tepi pembatas elemen HTML. Border pada CSS secara default tidak terlihat. Agar dapat mengetahui posisi batas terluar elemen yang didefinisikan sebagai border, maka border harus diatur dalam keadaan posisi solid.
Margin - dapat diartikan sebagai area kosong setelah garis tepi elemen (border). Area kosong ini berfungsi sebagai jarak antara elemen satu dengan lainnya agar tidak saling menempel.
Materi utama penyusun box model adalah konten. Dan konten ini secara default akan terlihat jelas (visible) dalam bentuk tulisan maupun gambar. Namun materi lain seperti margin dan padding bersifat transparent dan akan terlihat samar. Dan yang terakhir adalah border, namun border disini secara default mempunyai ketebalan garis sebesar 0px dan dalam keadaan non-solid jadi secara visual tidak akan terlihat.
Contoh dibawah ini akan diciptakan dua buah elemen HTML berupa <div> dan <p>. Elemen HTML berupa <div> merupakan elemen sebagai contoh konsep box model. Margin pada elemen ini sudah diatur dengan jarak 80px baik itu margin atas, bawah, kanan dan kiri. Padding diatur dengan jarak 40px untuk padding atas, bawah dan kiri. Sedangkan border diatur dalam keadaan solid dengan ketebalan 2px dan warna orange.
Elemen HTML yang kedua berupa elemen <p> yang berfungsi sebagai pembanding batas margin bawah pada elemen <div>.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>Belajar Style Sheet Pada CSS</title>
<style>
div{
margin-top: 80px;
margin-left: 80px;
margin-right: 80px;
margin-bottom: 80px;
padding-top: 40px;
padding-left: 40px;
padding-bottom: 40px;
border: solid 2px orange;
font-size:40px;
color: teal;
background: #ccc;
}
p{
border: solid 2px purple;
width :330px;
font-size:40px;
color:firebrick;
}
</style>
</head>
<body>
<div>Contoh Elemen Div HTML</div>
<p>Contoh Elemen P HTML</p>
</body>
</html>
Pada contoh di atas, jika elemen HTML diciptakan sebagai elemen tunggal dan tidak ada elemen lainnya di sekelilingnya maka marginnya akan berbatasan dengan tepian layar (screen).
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
