Frontend : CSS Bagian 9 – Konsep Box Model

Pada materi ini pembahasannya sangat padat ya teman-teman. Penulis akan meringkas sebisa mungkin tanpa mengurangi value dari materi “Konsep Box Model”. Konsep Box Model adalah konsep dimana setiap tag atau elemen akan diproses menjadi bentuk kotak(box). Konsep Box Model termasuk inti dari web design. Kita tidak bisa membuat tampilan website tanpa mengetahui “Konsep Box Model”. Dibawah ini contoh gambar ilustrasi Box Model.


Property Box Model

1. Padding

Padding adalah jarak antara konten dengan garis tepi (border).


2. Border

Border merupakan garis tepi pembatas elemen. Teman-teman bisa mengatur berbagai hal tentang border, seperti ketebalan, warna, dan jenis garis yang digunakan.


3. Margin

Margin adalah ‘spasi’ dari sebuah elemen dengan elemen lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap elemen tidak saling menempel satu sama lain.

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 9 - Konsep Box Model</title>
	<style>
	    div p {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin: 25px;
	      text-align: center;
	      background-color: cyan;
	    }
	  </style>
</head>
<body>
	<div>
		<p>Box Model</p>
	</div>
</body>
</html>


Penjelasan :

1. Di baris 7 dan 8, kita mengatur lebar dan tinggi elemen yang telah di manipulasi

2. Di baris 9, kita mengatur ukuran padding sebanyak 20pixel

3. Di baris 10, kita menetapkan border setebal 3px dengan garis tepi berwarna hitam

4. Di baris 11, kita mengatur margin sebanyak 25pixel

5. Di baris 12, kita memindahkan teks ke tengah

6. Di baris 13, kita menetapkan warna background box model menjadi warna cyan


Hasil :

Leave a Reply

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