Konsep Box Model pada CSS

Pada tutorial kali ini kita akan membahas Pengertian dan Konsep Box Model pada CSS. Jadi setiap elemen HTML sebenarnya memiliki Padding, Margin, dan juga Bordernya sendiri – sendiri.

Apa sebenarnya konsep box model itu ?

Konsep box model sebenarnya adalah konsep pengkotakan elemen HTML yang dimana di dalam elemen ini terdiri dari elemen itu sendiri, padding, border, dan juga marginnya. Dengan adanya Padding, Margin, dan juga Border pada tiap elemen, anda dapat mendesainnya, seperti mendesain jarak terhadap layar atau terhadap border elemen tersebut.

Padding adalah sebuah ruang kosong atau jarak yang diberikan terhadap elemen HTML dan letaknya ada di dalam border, sedangkan border adalah garis pembatas elemen tersebut dan margin sendiri adalah jarak yang diberikan terhadap elemen HTML dan letaknya terdapat di luar border. Untuk lebih jelasnya perhatikan gambar di bawah ini, anggap saja terdapat elemen <p>Hallo Dunia</p>.

Konsep Box Model pada CSS

Melalui keterangan di atas, didapat :

  1. Hallo Dunia, merupakan Elemennya / konten.
  2. Padding, adalah jarak antara Elemen dengan Border.
  3. Border, adalah batas Elemen atau garis tepi. Yang berwarna biru muda itulah yang dimaksud border, sedangkan garis tepi yang berwarna hitam, anggap saja batas layar.
  4. Margin, berada di luar Border, mendefinisikan jarak Border dengan ruang kosong diluarnya.

Contoh kode sumber :

Hasil dari kode sumber di atas :

Box Model

Materi di atas berhubungan dengan desain dan layout elemen, dan pastinya akan berpengaruh pada halaman juga. Ilmu dari materi ini disebut Konsep Box Model. Penting bagi anda untuk tahu perhitungan width dan height dari elemen yang anda buat secara pasti.

Contoh :

Perhitungan pada elemen <p> berarti :

Total Width = width (200) + padding kiri (20) + padding kanan (20) + border kiri (10) + border kanan (10) + margin kiri (0) + margin kanan (0). Total adalah 260.

Berikut kode sumbernya :

Untuk melihat hasilnya silahkan anda lakukan inspect elemen pada elemen, maka akan muncul hasil kalkulasi total width dari elemen tersebut.

Box Model CSS

Untuk menghitung Height elemen juga sama seperti cara menghitung Width, yakni :

Total Height = height + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah.

Silahkan kunjungin tutorial CSS lainnya :


Demikian tutorial dari Konsep Box Model pada CSS silahkan kunjungi tutorial CSS lainnya seperti Font pada CSS, mendesain link pada css, konsep margin pada CSS.

× Contact Us