Tutorial Belajar CSS: Pengertian CSS Box Model

Posted on

CSS Box Model dapat disebut selaku inti dari web design. Kita tak dapat mengatur tampilan situs tanpa memahami apa itu CSS box model. Di panduan belajar CSS kali ini saya akan membahas sekilas mengenai pengertian CSS box model dan fungsinya di dalam CSS.


Pengertian CSS Box Model

CSS Box Model yakni sebuah konsep dimana setiap element yang terdapat di halaman web diproses selaku kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, hakekatnya di tampilkan oleh web browser selaku ‘box’.

Dari yang layaknya ‘kotak’, masing-masing element HTML ini terdiri dari 4 lapisan, yakni: konten (isi), padding, border dan margin. Keempat ‘lapisan’ inilah yang membangun CSS Box Model.

Agar lebih gampang dimengerti, perhatikan gambar CSS Box Model berikut (sumber: www.w3c.org):


Property CSS Penyusun Box Model

Dari gambar diatas, terdapat 5 property CSS yang menyusun box model, yakni width, height, border, padding, dan margin.

Konten atau teks dari sebuah element berada di bagian tengah. Kita dapat mengatur lebar dan tinggi konten ini menggunakan property width dan height.

Berikutnya, terdapat padding. Padding yakni jarak antara konten dengan garis tepi (border) element. Selaku contoh, jikalau kita mendesain sebuah teks tanpa padding, karenanya teks tersebut akan mulai persis setelah garis tepi. Padding lazim ditambahkan supaya teks tak menyentuh sisi di dari sebuah sel tabel.

Setelah padding, berikutnya: border. Border ialah sebuah garis tepi pembatas element. Kita dapat mengatur pelbagai hal mengenai border, seperti ketebalan, warna, dan jenis garis yang digunakan.

Di lapisan terakhir terdapat margin. Margin yakni ‘spasi’ dari sebuah element dengan element lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap element tak saling menempel satu sama lain.

Berikut contoh pemakaian ke 5 property ini di di CSS:

Di contoh diatas saya mendesain 2 buah element HTML: tag <div> dan tag <p>. Kedua element ini di-style menggunakan kode CSS yang sama. Penjelasan lebih detail mengenai property-property ini akan saya bahas di beberapa panduan berikutnya.

Konsep CSS box model hakekatnya lumayan gampang dimengerti. Namun di prakteknya, terdapat beberapa hal yang perlu penjelasan lebih lanjut, terutama mengenai bagaimana kelima property ini saling berhubungan. Berikutnya kita akan membahas mengenai cara mengatur lebar element menggunakan property width.


eBook CSS Uncover Duniailkom

Sekiranya rekan-rekan ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web mempunyai tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/