Pembahasan kali ini adalah mengenai Border, Padding, dan Content. Untuk yang content tidak akan saya bahas detail karena sudah dibahas pada materi CSS dasar. Sebelum ke penjelasan, akan saya perlihatkan kembali gambaran sederhana mengenai pengertian masing-masing properti tadi.
Pertama kita akan bahas mengenai border. Border merupakan batas di sekeliling content dan padding. Kita bisa lihat ilustrasinya pada gambar di atas yang mana posisinya terletak pada area sekitar kotak sebelum margin. Ada beberapa nilai yang bisa diberikan pada border.
border-width = ketebalan border
border-style = style atau jenis border
border-color = warna border.
Jika ditulis kodenya seperti di bawah ini
border-width: 3px;
border-style: solid;
border-color: #000000;
/* Shorthandnya */
border: 3px solid #000000;
Nilai pertama yaitu ketebalan border 3px. Selanjutnya jenis bordernya adalah solid dan warna bordernya adalah hexa dari hitam. Untuk jenis border ada beberapa nilai yang bisa diberikan yaitu solid, dotted, dashed, double. Perbedaannya bisa kalian lihat pada gambar di bawah ini.
border-top: 5px solid blue;
border-right: 5px dotted red;
border-bottom: 5px dashed green;
border-left: 5px double black;
Perlu diingat dan diperhatikan. Dengan memberi properti border, otomatis akan menambah ukuran dari kotak atau elemen yang diberi border. misal jika kita memberi border dengan ketebalan 5px, maka ukuran disekeliling kotak akan bertambah 5px. Jadi jika kalian membuat kotak dengan lebar dan tinggi 100px, maka sekarang lebar dan tingginya menjadi 105px.
Sekarang bagaimana jika ingin ukuran dari kotaknya tetap meskipun diberi border? Caranya kita gunakan properti baru pada CSS3 yaitu Box Sizing. Dengan menggunakan Box Sizing, ukuran kotak akan tetap seperti awal meskipun sudah kita beri border dengan tebal berapapun.
Cara kerja properti Box Sizing ini sebenarnya mengubah arah dari ukuran tambahan yang diberikan kepada kotak. Maksudnya jika kita beri border pada kotak dengan ketebalan 10px, maka arah dari tebal 10px border adalah kedalam bukan keluar. Karena itu, sehingga membuat kotak tetap mempertahankan ukurannya. Namun dengan otomatis ukuran di dalamnya yaitu padding dan content menjadi mengecil. Penulisan kodenya seperti di bawah ini.
box-sizing: border-box;
Padding
Selanjutnya setelah border terdapat padding. Padding merupakan area transparan di dalam kotak. Bisa dikatakan padding merupakan kebalikan dari margin. Pada gambar ilustrasi di awal tadi, posisinya terletak di antara border dan content. Padding biasanya digunakan untuk memberi jarak antara kotak atau elemen dengan content di dalamnya. Penulisan kodenya sama persis seperti margin yaitu mempunyai empat nilai berupa top right bottom dan left (searah jarum jam). Bagi yang lupa silahkan dicek kembali pada materi margin, karena pada materi ini kita tidak akan mengulang mengenai penulisannya lagi.
Agar penjelasannya lebih mudah dipahami, buatlah sebuah file html dengan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Box Model (Padding)</title>
<style>
.kotak-1{
background-color: blue;
}
</style>
</head>
<body>
<div class="kotak-1">Ini content di dalam kotak satu yang isinya teks</div>
</body>
</html>
Dengan contoh di atas, kita memiliki sebuah div dengan mempunyai warna background biru. Jika kita beri padding-top 10px pada div kotak-1, maka jarak ke atas antara content dengan kotak akan menjadi 10px. Contennya pada contoh kasus di atas adalah berupa teks. Jadi jarak ke atas antara teks dengan kotaknya adalah 10px.
Secara umum padding sama persis seperti margin. Jadi bagi yang sudah paham mengenai margin, pasti gampang untuk memahami padding. Namun perlu diperhatikan ada beberapa hal yang membuat padding berbeda dengan margin.
- Padding tidak bisa diberi nilai negatif.
- Padding tidak memiliki nilai auto.
Jadi jika memberi nilai negatif dan auto pada padding, maka tidak akan befungsi.
Seperti yang sudah kita bahas tadi pada border, padding juga menambah ukuran dari kotak atau elemennya. Jadi jika kita beri lebar dan tinggi 200px pada div kotak-1 di atas tadi lalu memberinya padding 20px, maka sekarang ukuran lebar dan tinggi kotaknya bertambah menjadi 220px. Untuk membuat ukurannya tetap, seperti penjalasan di atas mengenai border gunakan box-sizing dengan nilai border-box.
Itulah penjelasan mengenai border dan padding. Untuk content sebenarnya tidak terlalu rumit untuk dipahami meskipun tidak dijelaskan pada topik kali ini secara detail. Karena dengan hanya melihat gambaran dari masing-masing posisi properti pada gambar di awal tadi sudah cukup untuk memahami pengertiannya.
Sedikit informasi mengenai properti pada Box Model, kita bisa melihat detailnya di browser dengan cara klik kanan pada elemen lalu pilih menu inspeksi atau Inspect Element. Selanjutnya pilih tab atau menu Computed. Di sana kita bisa lihat suatu elemen mempunyai margin berapa, border berapa, padding berapa dan ukuran content berapa.
Sebelum mengakhiri materi mengenai Box Model. Agar supaya semakin memahami, saya akan mencoba contoh kasus implementasi dari semua properti pada Box Model yaitu membuat sebuah navbar sederhana. Struktur dasarnya seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Box Model (Membuat Navbar)</title>
</head>
<body>
<header>
<div class="navbar">
<h1>Judul Web</h1>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</body>
</html>
Nanti hasil akhir yang akan kita buat seperti di bawah ini.
<style>
*{
margin: 0;
padding: 0;
}
.clear{
clear: left;
}
header{
background-color: blue;
width: 100%;
height: 60px;
border-bottom: 3px solid green;
}
.navbar{
position: relative;
width: 90%;
margin: auto;
}
.navbar h1{
float: left;
line-height: 60px;
color: white;
}
nav ul{
position: absolute;
right: 0px;
}
nav ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding: 0 0 0 20px;
line-height: 60px;
color: white;
}
</style>
Mari kita bahas detail dari kode-kode di atas. Namun sebelum itu, sebaiknya kalian gabungkan CSS di atas dengan kode HTML di awal lalu lihat hasilnya. Tampilannya akan sama seperti hasil yang kita inginkan sesuai gambar di awal tadi. Properti CSS yang digunakan kebanyakan adalah properti dari CSS Box Model yang sudah kita bahas bersama tadi. Jika kalian betul-betul paham mengenai materi Box Model ini maka saya yakin tidak akan terlalu kebingungan memahami kode CSS di atas.
Fokus bahasan kita mengenai kode CSS diatas adalah tentang Box Model. Untuk yang lainnya seperti Float dan Position akan dibahas pada part selanjutnya.
Pertama, saya melakukan reset terlebih dahulu pada setiap elemen yang ditandai oleh selector bintang (*) dengan membuat margin dan paddingnya menjadi nol. Tujuannya agar lebih leluasa mengatur jarak dan posisinya nanti. Karena pada dasarnya jika kita membuat sebuah elemen pada HTML, maka otomatis akan ada jarak default antar elemen tersebut. Membiarkan seperti itu sangat tidak direkomendasikan. Lalu digunakanlah CSS Reset. Meskipun sebenarnya ada teknik yang lebih baik dari pada seperti yang saya lakukan di atas tadi untuk melakukan reset. Silahkan kalian Googling mengenai CSS Reset.
Setelah direset, maka sekarang posisi h1 dan ul akan saling berdempet karena jarak atau margin defaultnya sudah hilang atau nol. Selanjutnya dengan membuat pembungkus judul web dan list menu ul yaitu div class navbar mempunyai lebar 90% dan margin auto, membuatnya menjadi berada di tengah seperti pembahasan kita mengenai margin auto di part 1 lalu. Selanjutnya memberikan padding left pada tag li sebesar 20px agar mempunyai jarak 20px ke kiri sehingga tidak lagi berdempetan.
Demikian penjelasan mengenai Box Model dan contoh kasusnya yaitu membuat navbar sederhana. Dengan memahaminya, merupakan langkah awal yang sangat bagus karena nanti setiap materi akan saling berkaitan. Mengabaikan satu materi saja, akan semakin membuat sulit untuk bisa membuat website.
Seperti yang kita bahas bersama di part 1 mengenai konsep dasar Box Model, bahwa pada dasarnya setiap elemen di halaman berada di dalam sebuah box atau kotak. Jadi bisa dibilang materi Box Model ini adalah inti dari pembahasan CSS Layouting itu sendiri. Dan akan lebih sempurna lagi jika bisa memahami materi yang akan kita bahas di part-part selanjutnya yaitu mengenai Float dan Position. Karena dua properti tadi yang akan mengatur di manakah sebuah kotak akan ditempatkan.
Cukup sampai di sini dulu mengenai Box Model. Kita akan lanjut lagi di part 3 mengenai Float. Terima kasih sudah membaca artikel kami dan semoga bermanfaat.
