Sebuah website pada umumnya memiliki tata letak yang berbeda tergantung desain yang digunakan. Ada yang membuat tata letaknya dimulai dari area konten di bagian tengah, side bar di pinggir halaman, menu di bagian atas hingga bagian credits dan kontak dibagian bawah. Dalam CSS, pengaturan tata letak tersebut selalu ditampilkan dalam bentuk kotak-kotak yang membagi bagian-bagian halaman website. Inilah yang dinamakan dengan CSS Box Model. CSS box digunakan untuk mengatur jarak antara tiap elemen dan komponen website agar tertata rapih dan tidak bertabrakan satu sama lain. Berikut pembahasannya.
Konsep CSS Box Model
CSS Box Model merupakan konsep model CSS yang dimana setiap elemen dan komponen website diproses berbentuk box (kotak). Setiap bagian dari halaman website, baik paragraf, video, tabel, gambar, dll. sebenarnya ditampilkan kedalam website berbentuk box. Box model dalam CSS terdiri dari empat lapisan, yakni sebagaimana gambar berikut ini.
Sumber : www.w3school.com
Bagian dalam CSS Box Model
Content
Bagian ini berada di tengah-tengah dari box. Area ini merupakan area untuk menampilkan konten dalam website. Bagian ini dapat diatur lebar dan tingginya menggunakan properti width (lebar) dan height (tinggi). Contohnya sebagai berikut.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Dasar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
Konten
</div>
</body>
</html>
Script CSS
.box{
width: 300px;
height: 300px;
background-color: cyan;
}
Hasil di browser
Padding
Padding merupakan jarak antara konten dengan border (garis tepi). Jika kita membuat teks tanpa padding, maka teks tersebut akan dimuat persis setelah garis tepi. Padding digunakan pada kerangka box agar teks tidak menyentuh sisi dalam dari sebuah box. Contoh untuk tanpa tepi bisa dilihat pada contoh sebelumnya tentang content. Bila menggunakan padding, maka tampilannya akan seperti dibawah ini dengan script HTML yang masih sama, hanya mengganti teksnya saja menjadi "Box 1".
.png)
Script CSS
.box{
width: 200px;
height: 200px;
background-color: cyan;
padding: 35px;
}
Disana menggunakan properti padding yang akan menentukan padding dari keempat sisi (top, bottom, left, right). Anda bisa menetapkan padding untuk setiap sisinya sebagai berikut.
.box{
width: 200px;
height: 200px;
background-color: cyan;
padding-top: 35px;
padding-bottom: 35px;
padding-left: 80px;
padding-right: 80px;
}
Hasil di browser
.png)
Shorthand Notation dalam Padding
Penulisan padding diatas dapat disingkat menggunakan shorthand notation. Shorthand notation adalah istilah untuk penulisan properti CSS secara singkat. Dalam properti padding seperti contoh padding di awal, ditulis "padding: 35px;" yang sama artinya dengan.
padding-top: 35px;
padding-bottom: 35px;
padding-left: 35px;
padding-right: 35px;
Jika menulis 2 nilai padding saja, misal "padding: 25px 30px;", maka akan bernilai dengan.
padding-top: 25px;
padding-bottom: 25px;
padding-left: 30px;
padding-right: 30px;
Jika menulis 3 nilai padding, misal "padding: 15px 30px 25px", maka akan bernilai dengan.
padding-top: 15px;
padding-right: 30px;
padding-bottom: 25px;
padding-left: 30px;
Jika menulis keempatnya, misal "padding: 15px 20px 25px 18px", maka akan bernilai dengan.
padding-top: 15px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 18px;
Urutan penerapan shorthand notation dalam padding ini, dapat menggunakan prinsip sebagai berikut :
- Jika hanya 1 nilai padding yang diberikan, maka akan diterapkan pada seluruh sisi padding (top, right, bottom, left).
- Jika terdapat 2 nilai padding yang diberikan, maka nilai padding pertama akan diterapkan pada top dan bottom, sedangkan nilai padding kedua akan diterapkan pada left dan right.
- Jika terdapat 3 nilai padding yang diberikan, maka nilai padding pertama akan diterapkan pada top, padding kedua pada left dan right, dan padding ketiga pada bottom.
- Jika keempat nilai padding diberikan, maka akan diterapkan masing-masing nilai pada top, right, bottom, left (berurutan).
Border
Border merupakan garis tepi yang berada diantara padding dan margin dan sekaligus memisahkannya. Properti ini terdapat 3 nilai, yakni ketebalan border, style (gaya penulisan) border, dan warna border. Misalnya sebagai berikut.
Script CSS.
.box{
width: 200px;
height: 200px;
background-color: cyan;
border: 5px solid red;
}
Hasil di browser.
.png)
Dapat dilihat bahwa ketebalan border sebesar 5px dengan bentuk border solid dan berwarna merah. Ada beberapa properti bentuk border yang dapat digunakan sebagai berikut.
- solid, border bergaris
- dotted, border titik-titik
- dashed, border strip
- double, border bergaris dua
- groove, border berbentuk groove 3D
- ridge, border berbentuk ridge 3D
- inset, border berbentuk inset 3D
- outset, border berbentuk outset 3D
- none, tidak ada border
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Dasar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<p>Box 1</p>
</div>
<div class="box2">
<p>Box 2</p>
</div>
<div class="box3">
<p>Box 3</p>
</div>
<div class="box4">
<p>Box 4</p>
</div>
<div class="box5">
<p>Box 5</p>
</div>
<div class="box6">
<p>Box 6</p>
</div>
<div class="box7">
<p>Box 7</p>
</div>
<div class="box8">
<p>Box 8</p>
</div>
<div class="box9">
<p>Box 9</p>
</div>
</body>
</html>
Script CSS
div{
float: left;
margin: 20px;
}
.box{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px solid black;
}
.box2{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px dotted black;
}
.box3{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px dashed black;
}
.box4{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px double black;
}
.box5{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px groove black;
}
.box6{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px ridge black;
}
.box7{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px inset black;
}
.box8{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px outset black;
}
.box9{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px none black;
}
Hasil di browser
.png)
Disini sengaja ditambahkan margin 20px agar terdapat jarak antar box dan float: left; untuk tiap box berjajar dari kiri ke kanan. Untuk box 9, karena menggunakan tipe border none, maka border tidak akan ditambahkan walaupun diberikan properti border lainnya.
Sama seperti padding, border pun dapat diberi nilai berbeda untuk setiap sisi bordernya. Misalnya sebagai berikut dengan script HTML yang sama dengan contoh kesembilan border sebelumnya, hanya dihilangkan <div> untuk Box 3 hingga Box 9.
Script CSS
div{
float: left;
margin: 20px;
}
.box{
width: 150px;
height: 150px;
background-color: cyan;
border-top: 10px solid blue;
border-right: 10px solid red;
border-bottom: 10px solid black;
border-left: 10px solid yellow;
}
.box2{
width: 150px;
height: 150px;
background-color: cyan;
border-top: 10px solid green;
border-right: 10px solid purple;
border-bottom: 10px solid yellow;
border-left: 10px solid black;
}
Hasil di browser
.png)
Margin
Sebelumnya sudah diterapkan margin: 20px dalam contoh penerapan kesembilan jenis border. Lalu apa margin itu sendiri ?. Margin adalah batas jarak antara border dengan luar konten, dimana luar konten ini digunakan untuk membatasi sebuah elemen dengan elemen lain. Jika tanpa menggunakan margin, maka setiap elemen akan saling menempel satu sama lain, seperti contoh berikut.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Dasar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Box 1</p>
</div>
<div>
<p>Box 2</p>
</div>
<div>
<p>Box 3</p>
</div>
</body>
</html>
Script CSS
div{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px solid black;
}
Hasil di browser
.png)
Kemudian apabila menerapkan "margin: 10px;", maka tampilan diatas akan menjadi seperti ini
.png)
Sekarang setiap elemen <div> akan berjarak 10px satu sama lain.
Shorthand Notation dalam Margin
Sama seperti padding, margin juga dapat ditulis menggunakan shorthand notation yang berlaku sama seperti padding. Misalnya dengan script HTML diatas, lalu menggunakan script CSS sebagai berikut.
div{
width: 150px;
height: 150px;
background-color: cyan;
border: 10px solid black;
margin: 20px 15px 18px 10px;
}
Hasil di browser
.png)
Margin bawaan Web Browser
Terdapat juga margin bawaan dari web browser seperti <p> dan heading <h1> sampai <h6> walaupun tanpa properti margin apapun. Misalnya sebagai berikut.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Web Dasar</title>
</head>
<body>
<h1>Loren Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi fugiat nostrum quia consectetur
voluptate labore nobis molestias qui, atque natus, dolore corporis sunt, quibusdam sit dolorum
veritatis facere voluptatum dolores.</p>
</body>
</html>
Hasil di browser
.png)
Apakah emang terdapat margin untuk kedua tag diatas ?. Coba tulis "margin: 0" didalam CSS nya sebagai berikut.
h1, p {
margin: 0;
}
Maka tampilan diatas akan menjadi seperti ini.
.png)
Kesimpulan
Keempat lapisan dalam box model CSS perlu dipelajari agar dapat menentukan ukuran tiap box dan jarak antar tiap elemen dalam konten halaman website. Untuk padding dan margin, dapat menggunakan shorthand notation untuk mempersingkat penulisan keduanya. Terdapat eberapa tag HTML yang memiliki margin bawaan mereka sendiri dalam web browser.
0 Komentar