Belajar box model pada css

belajar css

Apa itu box model ?

Setiap elemen atau tag HTML ditampilkan dalam bentuk box atau kotak, tetapi ada juga sebagian orang menamai kotak persegi panjang. Didalam CSS ini disebut dengan istilah box-model. Jadi box model adalah sebuah box atau “kotak” yang membungkus setiap elemen atau tag pada HTML, yang terdiri dari property: margin, border, padding dan konten. Dalam CSS, istilah box model digunakan ketika berbicara tentang desain dan tata letak. Supaya tidak bingung silakan lihat ilustrasi gambar dibawah ini:

ilustrasi box model

Penjelasan dari setiap bagian:

  • Konten – Teks, gambar, atau konten media lainnya dalam elemen.
  • Padding – Ruang didalam konten.
  • Border – Garis antara padding dan margin.
  • Margin – Ruang diluar konten.

Contoh:

Editor Online
  1. div {
  2. background-color: yellow;
  3. border: 10px solid blue;
  4. padding: 20px;
  5. margin: 30px;
  6. width: 200px;
  7. }

Unsur width dan height

Biasanya para web design ketika mengatur lebar dan tinggi suatu elemen menggunakan property width dan height. Tetapi pada kenyataannya itu semua hanya mengatur lebar dan tinggi area konten elemen saja. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, border, dan margin.

Contoh:

Editor Online
  1. #abu {
  2. width: 260px;
  3. background-color: grey;
  4. }
  5. #kuning {
  6. width: 200px;
  7. background-color: yellow;
  8. border: 10px solid blue;
  9. padding: 20px;
  10. margin: 0;
  11. }

Silakan Anda lihat hasil dari contoh diatas !!

Box berwarna abu-abu mempunyai lebar 260px dan box berwarna kuning mempunyai lebar 200px, tapi jika Anda perhatikan kedua lebar box tersebut mempunyai lebar yang sama bukan? Agar tidak bingung mari kita hitung kenapa bisa terjadi seperti itu.

Berikut perhitungannya:

200px (lebar) 
+ 40px (padding kiri + kanan) 
+ 20px (border kiri + kanan) 
+ 0px (margin kiri + kanan) 
= 260px

Menghitung width dan height

Lebar total elemen harus dihitung seperti ini:

Total elemen lebar = width + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan

Tinggi total elemen harus dihitung seperti ini:

Tinggi total elemen = height + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah

Leave a Reply

Your email address will not be published. Required fields are marked *