Cara menggunakan css box model

Question

Box Model CSS adalah membuat tampilan box atau kotak yang membungkus sebuah elemen HTML. Sebuah box terdiri dari properti-properti CSS dan elemen konten HTML.

Table of Contents Show

Memahami width pada Box Model
Lebar dan Tinggi Suatu Elemen
Apa yang dimaksud CSS Box Model?
Box sizing Border Box Untuk apa?
Apa fungsi dari CSS?
Apa saja elemen CSS?

Properti yang digunakan adalah margin, border, padding dan elemen konten HTML didalamnya. Untuk lebih jelasnya lihat gambar berikut:

margin - Area luar dari border yang memberi jarak dengan elemen lainya, margin berwarna transparan atau tidak memiliki warna.
border - Batas atau Garis tepi diantara margin dan padding, border bisa diubah warnanya.
padding - Jarak antara konten dan border, padding berwarna transparan sehingga backgroundnya akan mengikuti background konten.
content - Konten dari box bisa berupa text atau gambar.

Membuat box model dengan menggunakan tag <div>. Tag div adalah tag yang berdiri sendiri dan tidak memiliki nilai sehingga anda bisa bebas mengubahnya.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Box Model</title>
    <style>
      div{
        width: 300px;
        padding: 20px;
        border: solid 10px hotpink;
        margin: 10px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Box Model</h2>

    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </body>
</html>

Properti width adalah untuk mengatur lebar dari box. Jadi pada contoh diatas meskipun content dari box panjang melebihi 300px, lebar dari box akan tetap 300px dan lebar content yang akan menyesuaikan lebar box.

Memahami width pada Box Model

Untuk lebih mudah memahaminya, perhatikan contoh berikut:
Asumsikan kita ingin mengatur lebar box total 300px.


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Box Model</title>
    <style>
      div{
        width: 260px;
        padding: 10px;
        border: solid 10px blue;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <img src="saitama-opm.png" width="300px" alt="Saitama" />
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </body>
</html>

Pada contoh tersebut kita ingin membuat sebuah box dengan lebar 300px. Saya menggunakan sebuah gambar sebagai perbandingan. Gambar saya ubah lebarnya menjadi 300px sehingga lebar box seharusnya sama dengan lebar gambar.

Pada properti width saya memasukan nilai 260px. Mengapa demikian? bukankah kita ingin membuat box dengan lebar 300px?

Coba anda perhatikan pada properti padding dan border. Masing-masing memiliki nilai 10px dimana untuk menyatakan sebuah lebar maka sisi kanan dan kiri yang digunakan.

Sehingga pada properti padding akan memiliki nilai untuk membuat sebuah lebar adalah 20px (right + left) begitu juga dengan border memiliki nilai 20px (right + left).

Jadi jika ditotal padding dan border sudah memakai lebar 40px dari lebar box yang akan dibuat.

Maka supaya box model yang dibuat memiliki lebar 300px, nilai width (lebar) pada div harus disesuaikan agar menghasilkan lebar box 300px yaitu 300px - 40px = 260px.

Karena pada contoh tersebut margin di set 0 maka tidak perlu dihitung, kecuali jika anda mengubah ukuran margin maka margin kanan dan kiri juga harus dihitung dan dikurangi dengan lebar div.

Sekian penjelasan tentang box model, jika ada pertanyaan silakan tulis dikolom komentar. Terimakasih.

Semua elemen HTML pada dasarnya bisa kita anggap sebagai sebuah box/kotak. dalam CSS, pengaturan dan pemahaman tentang “box model” sangat diperlukan dalam membangun sebuah design dan layout. tanpa memahami hal ini, kita akan kesulitan dalam membuat layout yang kompleks. misalnya kita akan membuat suatu halaman web yang terdiri dari 3 kolom, 4 kolom dan lain lain.

CSS Box model pada dasarnya adalah sebuah kotak yang melingkari elemen HTML yang terdiri dari sebuah margin, garis (border), padding dan ukuran sebenarnya dari elemen tersebut. perhatikan ilustrasi dibawah ini

Penjelasan

Content : area dimana kita menempatkan text dan gambar
Padding : area bagian dalam yang mengelilingi content
Border : garis yang melingkari content
Margin : jarak content yang kita buat dengan content lain, areanya berada di luar baris.

Lebar dan Tinggi Suatu Elemen

Pernahkan kita mengharapkan lebar dari 2 buah elemen sebesar 50%, namun kedua elemen itu tidak saling bersebelahan dan tidak sesuai dengan yang kita harapkan? atau contoh lain pernahkah kita mengharapkan sebuah artikel dengan 3 buah kolom, namun yg terjadi malah 2 kolom dan 1 kolom lagi kebawah?
kasus-kasus demikian sering kita jumpai jika kita tidak mengetahui penjelasan dibawah ini.

Catatan :

Ketika kita mengatur lebar dan tinggi suatu elemen, kita hanya mengatur ukuran area content dari gambar yang sudah kita lihat diatas. untuk menghitung lebar atau tinggi sebenarnya kita harus menambahkan padding, margin dan border yang sudah kita set pada elemen tersebut.

Perhatikan contoh dibawah ini

jika kita lihat, kedua elemen diatas diset dengan ukuran berbeda. namun pas di render ternyata memiliki ukuran yang sama. mengapa demikian? ternyata lebar dan tinggi suatu elemen dipengaruhi oleh border dan paddingnya. untuk kasus diatas maka yang terjadi adalah :
Width = 270px + 34px (padding kanan dan kiri) + 6px (border kanan dan kiri) + 0px (margin kanan dan kiri).

Lebar sebenarnya dari suatu elemen : Lebar content + padding kanan dan kiri + border kanan dan kiri + margin kanan dan kiri
Tinggi sebenarnya dari suatu elemen : Tinggi content + padding atas dan bawah + border atas dan bawah + margin kanan dan kiri
Untuk IE versi 8 dan dibawahnya, secara default dia bertipe border-box yang artinya Tinggi sebenarnya sudah termasuk padding dan border didalamnya. untuk mengatasi masalah ini, tambahkan pada bagian atas document HTML

Box-sizing

Setelah kita memahami penjabaran diatas, untuk melengkapi pengetahuan kita dalam mempermudah pembuatan layout maka kita perlu mengetahui sintaks box-sizing pada CSS. box-sizing memiliki value (padding-box, content-box dan border-box). Pada umumnya, semua elemen HTML bertipe content-box yang perilakunya sudah kita jelaskan diatas. karena perilaku content-box, kadang kita kesulitan untuk membagi kolom terlebih lagi jika menggunakan persentase karena berapapun kita set maka akan di jumlahkan dengan padding, margin dan border pada elemen tersebut.

Box-sizing di perkenalkan pada CSS3 dan yang paling banyak digunakan saat ini adalah border-box. Mengapa border-box? border-box sifatnya berbanding terbalik dari content-box. Tipe ini mengambil jatah padding dan border dari lebar/tinggi yang kita berikan kepada elemen tersebut sehingga kita tidak usah khawatir lebar/tingginya bertambah. border-box mempermudah kita dalam pengaturan layout responsive. di beberapa framework kekinian, bootstrap misalnya melakukan reset untuk semua elemen html agar bernilai border-box dengan menggunakan sintaks dibawah ini :

* {
box-sizing:
border-box;
}

atau dengan cara yang lebih elegen :
box-sizing pada elemen mengikuti pengaturan dari elemen diatasnya (inheritance), elemen paling induk adalah html.

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Untuk memahami lebih lanjut tentang border-box, perhatikan contoh dibawah ini. (silakan bandingkan dengan contoh sebelumnya)

Pembagian kolom dengan memanfaatkan teknik box-sizing:border-box

Jika box-sizing dirubah jadi content-box atau dihilangkan

contoh pembagian layout dengan memanfaatkan floating dan box-sizing

Demikian penjelasan singkat mengenai Box Model pada CSS, jika ada pertanyaan seputar materi ini silakan tanyakan di kolom komentar.

Apa yang dimaksud CSS Box Model?

CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai 'box'.

Box sizing Border Box Untuk apa?

Apa itu box sizing ? Box sizing adalah properti yang menerima nilai padding dan border pada suatu elemen termasuk sebagai nilai total dari width dan height suatu elemen.

Apa fungsi dari CSS?

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.