CSS Box Model

-

 

Apa itu Box Model?

Setiap elemen HTML ditampilkan dalam bentuk box (kotak). Jika diperhatikan, sebuah website umumnya terbagi menjadi beberapa area. Mulai dari menu di bagian atas, isi konten di bagian tengah, iklan di sisi kanan, sampai credit dan info kontak di bagian paling bawah. Berikut contoh website yang menggunakan box model:

website yang menggunakan css box model

Memang tidak semua website didesain seperti itu. Penempatannya bisa disesuaikan dengan kebutuhan dan gaya yang diinginkan. Tapi dari ilustrasi di atas, bisa kita simpulkan bahwa website selalu ditampilkan dalam bentuk kotak-kotak. Inilah yang dimaksud dengan box model.

Box model bertujuan untuk menyusun elemen-elemen website agar terlihat lebih rapi dan menarik. Tidak hanya dari segi tampilan, interaksi dengan pengguna pun juga lebih maksimal. Penyusunan yang tepat akan membuat website Anda menjadi lebih intuitif.

Karena setiap elemen disusun dan ditempatkan dengan rapi, pengguna bisa lebih mudah mencari dan menggunakan setiap fitur yang ada di website Anda. Hasilnya, website Anda menjadi lebih mudah untuk digunakan, menarik secara visual, dan membuat pengunjung betah berlama-lama di sana.


Fungsi CSS Box Model

Anda sudah mengetahui bahwa CSS adalah make-up bagi sebuah website. Fungsi utamanya adalah mendesain tampilan website agar terlihat lebih cantik dan menarik. Jika dikaitkan dengan model kotak-kotak yang kita bahas di atas, maka fungsi CSS Box Model adalah untuk menata dan mempercantik kotak-kotak tersebut.

Setiap elemen dalam website harus didesain dengan teliti. Mulai dari ukuran, warna, penempatan, sampai jarak antar elemen. Anda tidak akan mendapatkan hasil yang memuaskan kalau hanya mengandalkan HTML untuk urusan ini. Karena itulah CSS Box Model hadir untuk melengkapi kekurangan-kekurangan HTML.


3 Property CSS Box Model yang Wajib Anda Ketahui

CSS Box Model terdiri dari 3 property yaitu margin, padding, dan border. Masing-masing property mempunyai fungsi dan cara penggunaan tersendiri. Kita mulai dari property yang pertama.

1. Margin

Dalam Model Box CSS, property margin digunakan untuk mengatur jarak antar elemen. Tanpa pengaturan margin, elemen-elemen website Anda bisa saling berbenturan atau melekat satu sama lain. Ini akan membuat website Anda terlihat berantakan dan tidak menarik.

Penggunaan property margin bisa Anda lihat pada contoh kode di bawah ini.

<html>
<head>
	<title>Belajar CSS Box Model</title>
	<style>
		.elemen {
			width : 120px;
			height : 120px;
			background-color : red;
			margin-bottom : 30px;
		}
	</style>
</head>
<body>
	<div class="elemen">
		Elemen 1
	</div>
	<div class="elemen">
		Elemen 2
	</div>
</body>
</html>

Jalankan kode di atas menggunakan web browser. Anda akan melihat dua kotak berwarna merah seperti di bawah ini :

membuat margin dengan css

Terdapat jarak antara Elemen 1 dan elemen 2. Jarak tersebut kita buat dengan property margin-bottom seperti pada contoh kode di atas. Coba saja mengubah nilai margin-bottom dari 70px ke nilai berapa pun yang Anda suka. Jarak antara kedua kotak tersebut pasti juga berubah.

Property margin digunakan untuk mengatur jarak antar elemen. Tidak hanya ke bawah, Anda juga bisa menentukan jarak di sisi atas, kiri, dan kanan. Lihat tabel di bawah :

PropertyFungsiContoh
margin-topMengatur jarak elemen di sisi atasmargin-top : 50px
margin-bottomMengatur jarak elemen di sisi bawahmargin-bottom : 50px
margin-leftMengatur jarak elemen di sisi kirimargin-left : 50px
margin-rightMengatur jarak elemen di sisi kananmargin-right : 50px
2. Padding

Property CSS Box Model yang kedua adalah padding. Fungsi dari property ini adalah untuk memberikan jarak pada isi elemen.

Coba Anda lihat lagi gambar kedua kotak di atas. Walaupun kita sudah membuat jarak antara elemen 1 dan elemen 2, tapi teks yang tertulis di dalam elemen terlihat terlalu mepet ke garis kotak.

Hal ini membuat teks terlihat tidak rapi. Untuk mengatasinya, Anda bisa menggunakan property padding agar teks diletakkan agak ke tengah sehingga tidak terlalu mepet.

Contohnya seperti ini :

<html><head>	<title>Belajar CSS Box Model</title>	<style>		.elemen {			width : 120px;			height : 120px;			background-color : red;			margin-bottom : 30px;			padding-left : 10px;			padding-top : 10px;		}	</style></head><body>	<div class="elemen">		Elemen 1	</div>	<div class="elemen">		Elemen 2	</div></body></html>
membuat padding dengan css

Dari contoh kode sebelumnya, kita tambahkan dua property padding. Yang pertama adalah padding-left untuk memberi jarak dari sisi kiri. Kemudian padding-top untuk jarak dari atas. Hasilnya bisa Anda lihat pada gambar berikut ini :

Dengan menentukan padding, teks dalam elemen terlihat lebih berjarak dari garis kotak. Dengan begitu, teks menjadi lebih rapi dan mudah untuk dibaca.

Sama seperti margin, padding juga terdiri dari empat property, yaitu :

PropertyFungsiContoh
padding-topMengatur jarak elemen dengan isi dari sisi ataspadding-top : 50px
padding-bottomMengatur jarakelemen dengan isi dari sisi bawahpadding-bottom : 50px
padding-leftMengatur jarak elemen dengan isi dari sisi kiripadding-left : 50px
padding-rightMengatur jarak elemen dengan isi dari sisi kananpadding-right : 50px

Penting untuk dicatat bahwa padding left dan right akan menambah ukuran width. Sedangkan top dan bottom menambah ukuran height.

Misalnya, pada contoh di atas, kita memberikan nilai sebesar 10px untuk padding-left dan padding-top. Secara otomatis, ukuran width dan height elemen juga akan bertambah sebesar 10px menjadi 130px.

Untuk penggunaan CSS shorthand, penerapannya sama persis dengan margin.

3. Border

Anda mungkin sudah tidak asing lagi dengan istilah border. Dalam CSS Box Model, border berfungsi untuk memberikan garis pinggir. Coba Anda lihat lagi contoh di atas. Warna merah pada elemen berbenturan langsung dengan background.

Border sangat diperlukan jika warna elemen dan warna background saling tumpang tindih. Bayangkan jika Anda harus mencantumkan gambar bendera merah putih di website berwarna background putih. Warna putih pada bendera akan menyatu dengan background sehingga pengunjung hanya akan melihat warna merah.

Lain halnya jika Anda memberikan batas pada gambar bendera berupa border berwarna hitam. Pengunjung akan melihat bahwa gambar tersebut adalah bendera merah putih. Itulah gunanya border.

Penggunaan property border pada CSS Box Model bisa Anda lihat pada contoh kode berikut :

<html>
<head>
	<title>Belajar CSS Box Model</title>
	<style>
		.elemen {
			width : 120px;
			height : 120px;
			background-color : red;
			margin-bottom : 30px;
			padding-left : 10px;
			padding-top : 10px;
			border-width : 6px;
			border-style : solid;
			border-color : black;
		}
	</style>
</head>
<body>
	<div class="elemen">
		Elemen 1
	</div>
	<div class="elemen">
		Elemen 2
	</div>
</body>
</html>

Dapat dilihat bahwa ada 3 property baru yang kita tambahkan. Jika Anda menjalankan kode di atas di web browser, Anda akan mendapatkan hasil seperti ini :

membuat border dengan css

Anda bisa melihat ada garis hitam yang membatasi keempat sisi elemen. Itu adalah hasil dari property border yang kita tentukan pada kode di atas.

Penjelasan dari ketiga property border tersebut bisa Anda lihat pada tabel di bawah ini :

PropertyFungsiContoh
border-widthMengatur ketebalan borderborder-width : 6px
border-styleMengatur jenis borderborder-style : solid
padding-leftMengatur jarak elemen dengan isi dari sisi kirimargin-left : 50px
Sama seperti margin dan padding, ukuran border juga akan menambah ukuran elemen. Jadi perhitungkan baik-baik ukuran elemen yang Anda inginkan dengan menyertakan padding dan border.

Komentar

Posting Komentar

Postingan populer dari blog ini

IP

-
Gambar
  Internet Protocol (IP) Sebuah IP Address adalah produk yang menarik dari teknologi komputer modern yang dirancang untuk memungkinkan satu komputer (atau perangkat digital lainnya) untuk bisa berkomunikasi dengan yang lain melalui Internet. IP Address akan memungkinkan lokasi harfiah dari miliaran perangkat digital yang terhubung ke Internet untuk menunjuk dan membedakan dari perangkat lain. Dalam arti yang nyata sama dengan ketika seseorang perlu alamat anda untuk mengirimkan surat, sehingga komputer remote memerlukan alamat IP Anda untuk berkomunikasi dengan komputer Anda. “IP” singkatan dari Internet Protocol, sehingga alamat IP adalah alamat Internet Protocol. Apa artinya? Internet Protocol adalah seperangkat aturan yang mengatur aktivitas internet dan bisa memfasilitasi untuk penyelesaian berbagai tindakan di World Wide Web. Oleh karena itu alamat Internet Protocol merupakan bagian dari sistematis yang diletakkan pada jaringan yang saling berhubungan yang mengatur k...
Baca selengkapnya

Scala

-
Pengertian   Scala merupakan bahasa pemrograman yang menggabungkan paradigma pemrograman yang berorientasi pada objek dengan fungsional. Bahasa pemrograman ini termasuk dalam bahasa pemrograman berorientasi objek murni yang dalam arti bahwa setiap nilai adalah objek. Serta termasuk bahasa pemrograman fungsional yang artinya setiap fungsi adalah nilai. Sama halnya seperti Java, Scala di tulis untuk dapat dijalankan pada JVM (Java Virtual Machine). Bahasa pemrograman lainnya yang dapat berjalan di JVM seperti Kotlin dan Ceylon. Semua bahasa ini dibuat dengan tujuan menyederhanakan atau membuat Java yang lebih baik. Meskipun dijalankan pada JVM, nyatanya Scala bukanlah perpanjangan dari Java. Ketika proses kompilasi (penyusunan) kode Scala di terjemahkan ke dalam betycode Java dan berjalan di JVM. Scala dapan digunakan dalam berbagai lingkungan, mulai dari script yang sederhana hingga sistem yang besar atau rumit sekalipun dalam dunia pemrograman ini disebut dengan istilah general pur...
Baca selengkapnya

Variabel Dan Tipe Data

-
Gambar
    Memahami Variabel dan Tipe Data dalam Javascript Pengertian Variabel Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti  string  (teks),  number  (angka), objek, array, dan sebagainya. Cara Membuat Variabel Di JavaScript Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci  var  lalu diikuti dengan nama variabel dan nilainya. Contoh: var title = "Belajar Pemrograman Javascript" ; Pada contoh di atas, kita membuat variabel bernama  title  dengan nilai berupa teks  (string) :  "Belajar Pemrograman Javascript" . Perhatikan! Pada contoh di atas, kita menggunakan huruf bersar atau kapital untuk nama variabel yang terdiri dari dua suku kata. Kenapa tidak menggunakan  underscore ? Pada Javascript kita dianjurkan menggunakan camelCase dalam penamaan. Boleh-boleh saja menggunakan  snake case  atau  underscore. Hal ters...
Baca selengkapnya