Kamu Tidak Akan Mahir Teknik Layout CSS Tanpa Memahami Konsep Ini

posted in: Blog, HTML & CSS | 9

Kamu tidak akan mampu menguasai teknik layout CSS tanpa memahami konsep yang satu ini.

Ya, CSS Box Model merupakan konsep yang paling penting jika kamu ingin membuat layout web yang menarik. Dulu, sebelum saya memahami konsep ini saya seringkali mengalami masalah saat membuat layout. Jangankan membuat, bahkan saat memodifikasi dari layout yang sudah jadi aja masih kena kendala. Mulai dari elemen yang bertabrakan, konten yang keluar dari border, spasi antar elemen yang tidak sesuai keinginan. Padahal, saya yakin sekali kode CSS nya sudah benar, sudah saya cek bolak-balik, googling sana sini. Ternyata ada satu hal yang missing, ya, semua permasalah di atas adalah akibat saya belum memahami konsep box model.

Okay, karena kamu sudah mulai mengerti pentingnya memahami box model. Mari saya mulai pembahasannya.

Dua Tipe Elemen dalam HTML

Untuk memahami konsep Box Model kita harus tahu dua tipe elemen ini dulu, dalam HTML kita bisa mengkategorikan elemen elemen atau tag yang ada dalam dua kelompok besar. Apa itu, yang pertama adalah BLOCK ELEMENT, yang kedua adalah NON-BLOCK ELEMENT. Apa maksudnya? begini izinkan saya bahas satu- satu.

1. Block Element

Block Elemen merupakan elemen yang secara default (belum diterapkan CSS) dirender oleh browser menjadi sebuah block. Artinya begini sebelum kita memberikan CSS apapun, pure HTML, elemen tersebut akan bertumpuk dengan elemen yang lain. Tidak bersebelahan. Dan secara default lebar DIV tersebut akan membentang seukuran dengan lebar layar browser kita. Misalnya adalah elemen DIV. Jika ada dua DIV dalam kode HTML kita, maka defaultnya DIV yang kita tulis pertama akan berada di atas lalu dibawahnya disusul DIV kedua. DIV tersebut tidak bersebelahan kiri-kanan tapi atas bawah. Contoh lain dari BLOCK ELEMENT adalah TABLE, TR, P, SECTION, HEADER, ARTICLE, H, dll. Tentu kita bisa mengubah perilaku elemen-elemen di atas dengan sedikit kode CSS, tapi itu hal lain kita sedang berbicara tentang perlaku default dari elemen elemen di atas.

2. Inline Element

Sesuai namanya, ini merupakan kelompok elemen yang berkebalikan dengan kelompok elemen sebelumnya. Inline element secara default akan dirender oleh browser tidak menjadi block. Maksudnya, elemen ini tidak akan melebar mengisi seluruh lebar layar browser, hanya selebar konten di dalamnya saja. Oleh karena itu, bila ada dua atau lebih elemen jenis ini kita tulis berdekatan, maka elemen-elemen tersebut akan diposisikan menyamping ke kanan terus mengisi space yang masih kosong. Bila space sudah habis baru mengisi bawahnya. Hal ini berbeda dengan block elemen bukan. Contoh elemen yang masuk di kategori ini adalah a, span, i, em, dll.

Sekarang kamu sudah tahu tipe dua elemen dalam HTML, kamu siap untuk melanjutkan pembelajarannya. Pada saat membuat layout web nanti, kita akan banyak berurusan dengan BLOCK ELEMENT. Itulah gunanya kamu memahami perbedaan dasar elemen elemen HTML yang ada  Jangan sampai kamu nanti bingung hanya karena terlewat mengetahui tipe-tipe elemen di atas.

Okay mari kita ke pembahasan CSS BOX MODEL.

 

CSS Box Model

Secara default, semua element block element dan inline element memiliki perilaku ini. Dan hal ini seringkali menjadi masalah bagi web designer pemula. Pada dasarnya, semua elemen dalam HTML terdiri dari 4 komponen BOX MODEL. Yaitu:

  1. width
  2. margin
  3. padding
  4. border

Dengan 4 komponen di atas, maka perhitungan lebar sesungguhnya (actual width) dari element bukanlah nilai dari property width. Rumus yang tepat untuk menghitung lebar elemen adalah

 

ACTUAL WIDTH = width + padding left + padding right + border left + border right + margin left + margin right

dengan demikian maka ACTUAL HEIGHT dihitung sebagai berikut:

ACTUAL HEIGHT = height + padding top + padding bottom + border top + border bottom + margin top + margin bottom

Inilah perilaku default dari elemen-elemen pada HTML. Mari kita lihat beberapa contoh kodenya.

div.nomor-satu{
  background: red;
  margin-bottom: 5px;
  width: 100px;
  height: 70px;
  padding: 10px;
  border: 5px solid orange;
}

Berapa actual width, dan actual height elemen div.nomor-satu bila diterapkan CSS di atas?

actual width = 100px (width) + 10px (padding left)  + 10px (padding right) +  5px (border left) + 5px (border right) = 130px.

actual height = 70px (height) + 10px (padding top) + 10px (padding bottom) + 5px (border top) + 5px (border bottom) + 5x (margin bottom) = 105px.

Meskipun di deklarasi CSS saya tuliskan width: 100px dan height: 70px, tapi lebar dan tinggi sesungguhnya untuk elemen tersebut adalah 130px x 105px. Bila web desainer tidak memahami perilaku ini, seringkali perhitungan mereka meleset ketika menentukan settingan layout web. Pernah mengalami? Kalo dihitung2 sudah pas jumlah lebar dan marginnya, tapi kok selalu bertabrakan elemennya, ada yang ke bawah karena tidak cukup spacenya. Nah inilah penyebab masalah itu, yaitu perilaku box model.

Adakah alternatif dari perilaku ini?

Yup, tentu, kalo Kamu langsung memakai framework Bootstrap, mungkin tidak akan terjadi masalah, karena bootstrap sudah menghandlenya. Lalu apa sebenarnya yang digunakan oleh Bootstrap atau alternatif dari perilaku di atas, gunakan property box-sizing dan set nilainya menjadi “border-box”. Dengan setting tersebut, maka bila kita menulis width: 100px, ACTUAL WIDTH dari elemen tersebut akan menjadi 100px, tidak peduli berapa padding atau bordernya, pokoknya saya maunya total width 100px. Jadi yang terpotong adalah konten di dalamnya ya. Untuk lebih jelas silahkan perhatiakan contoh di bawah ini. Penggunaan border-box dan lihat bedanya di TAB RESULT.

 

 

Demikian, artikel ini dibuat. Semoga yang sedikit ini bermanfaat bagi yang belum tahu. Dan kalau yang sudah tahu atau tahu cara lain yang lebih pintar, silahkan tinggalkan komentar ^^

Follow Muhammad Azamuddin:

Latest posts from