CSS Box Model
Tahukah Anda, bahwa setiap elemen/tag HTML ditampilkan dalam bentuk box atau kotak? dan di dalam istilah CSS disebut dengan box-model.
Kali ini, saya akan sedikit membahas pemahaman dasar tentang box model.
Mungkin diantara pembaca sekalian sudah pernah menggunakan property margin, padding dan border pada CSS untuk melakukan pengaturan pada sebuah tag atau elemen di HTML.
Berikut ini adalah penjelasan tentang masing-masing elemen beserta contohnya :
1. Margin
Property margin digunakan untuk memberikan jarak antar elemen atau tag. Contoh yang paling sering saya gunakan adalah untuk memberikan jarak antar <div> atau bisa juga pada tag-tag HTML lainnya.
Sebagai latihan, Anda dapat mencoba script berikut ini :
<html> <head> <title>Box Model</title> <style> .kotak { width : 100px; height: 100px; background-color: yellow; margin-bottom : 50px; } </style> </head> <body> <div class="kotak"> Kotak satu </div> <div class="kotak"> Kotak dua </div> </body> </html>
Dan hasilnya pada browser dapat dilihat pada gambar di bawah ini :
Bisa Anda perhatikan, bahwa dengan memberikan margin-bottom = 50px maka jarak antar kotak satu dan kotak dua sedikit berjauhan.
Dan apabila property ini dihilangkan maka Anda dapat melihat perbedaannya.
Selain property di atas, Anda dapat memberikan jarak dari kanan(right), kiri(left), dan atas(top), Misalnya :
margin-top : 20px; margin-right : 30px; margin-bottom : 50px; margin-left : 50px;
Dengan memanfaatkan CSS-Shorthand Anda dapat menuliskan script di atas dengan singkat seperti di bawah ini :
margin : 20px 30px 50px 50px;
Masing-masing dari nilai tersebut adalah :
margin : top right bottom left;
Sedikit saya bahas penggunaan CSS Shorthand lainnya untuk penggunaan margin, misalnya tag margin kita tuliskan seperti di bawah ini
margin : 20px;
itu berarti nilai dari top, right, bottom dan left = 20 pixel.
Jika dituliskan :
margin : 20px 40px;
Nilai di atas berarti Nilai margin dari top & bottom = 20 pixel, sedangkan nilai right & left = 40 pixel.
Satu lagi contoh, saya akan memberikan nilai margin seperti berikut :
margin : 20px 40px 50px;
Mungkin Anda sedikit bingung ? Penjelasannya adalah bahwa nilai di atas berarti nilai top = 20 pixel, nilai right dan left = 40 pixel dan nilai bottom = 50 pixel.
Bagaimana nih, Apakah Anda sudah lebih paham mengenai penggunaan CSS-Shorthand ?
Karena kita akan masuk ke pembahasan property box-model berikutnya yang tidak kalah penting yaitu adalah :
2. Padding
Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML, namun coba Anda perhatikan antara text (Kotak satu) dengan garis pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box tersebut.
Property yang digunakan untuk memberikan jarak antara konten elemen dengan elemen tersebut adalah padding.
Coba Anda tambahkan kode CSS-nya seperti berikut :
<style> .kotak { width : 100px; height: 100px; background-color: yellow; margin-bottom : 50px; padding-left : 20px; } </style>
Akan tetapi, perlu Anda perhatikan bahwa ketika kita menambahkan padding, ukuran lebar (width) dari class (.kotak) juga akan bertambah. jadi kotak yang sebelumnya bernilai width = 100 pixel bertambah menjadi 120 pixel dengan adanya penambahan padding-left sebesar 20 pixel.
Catatan : Penggunaan CSS-Shorthand pada padding sama dengan penggunaan pada margin.
3. Border
Property border digunakan untuk memberikan garis pinggir pada elemen. Ada 3 property yang harus Anda set yakni width, style dan color
border-width : 5px; border-style : solid; border-color : red;
Atau dapat disingkat menjadi seperti berikut ini :
border : width style color; Contohnya
border : 5px solid red;
Sama halnya dengan padding, penambahan porperty border juga akan menambah ukuran dari .kotak
Sekarang kotak pada latihan kita widthnya menjadi 130 , darimana nilai tersebut didapat? Berikut adalah rinciannya :
border kiri : 5
padding kiri : 20
width : 100
border kanan : 5
Total width : 5+20+100+5
Konsep CSS box model sebenarnya cukup mudah dipahami. Namun dalam prakteknya, terdapat beberapa hal yang perlu penjelasan lebih lanjut, terutama tentang bagaimana mengaplikasikannya pada pengaturan grid sebuah layout website.
Media Edukasi seputar digital marketing, web design dan web programming bagi Anda yang ingin memulai dan mengembangkan bisnis online, startup digital atau layanan pemasaran di internet. 100% Gratis!
Dapatkan beragam artikel tutorial, tips menarik dan pengetahuan seputar digital marketing, web design dan web programming langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan Anda!