Mengatur Model Layout atau Box Model CSS - Layout atau tata letak adalah penyusunan dari elemen-elemen
desain yang berhubungan ke dalam sebuah bidang sehingga membentuk suatu susunan
yang teratur. Semua elemen HTML yang akan disusun sebagai layout dapat dianggap
sebagai box model. Dalam CSS, istilah "box model" digunakan ketika
berbicara tentang desain dan layout/tata letak.
Box model CSS pada dasarnya adalah sebuah kotak layout yang
membungkus sekitar elemen HTML, yaitu terdiri dari: margin, border, padding,
dan isi konten.
Box model memungkinkan kita untuk menambahkan border di
sekitar elemen, dan untuk menentukan jarak spasi antar elemen HTML.
Agar lebih jelas coba perhatikan gambar berikut ini sebagai
ilustrasi box model CSS:
Penjelasan dari gambar tersebut adalah:
- Content - Isi konten dari box, di sinilah teks dan gambar akan muncul.
- Padding - untuk Menghapus suatu area di sekitar konten. Alias mengatur jarak antara isi konten ke batas tepi border.
- Border - batas tepi yang mengatur jarak antara padding dan konten.
- Margin - Menghapus suatu area di luar border. Alias jarak antara area di luar border sampai ke border.
Contoh Penulisan Coding Mengatur Margin, Padding, Border
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: white;
width: 300px;
padding: 25px;
border: 25px solid black;
margin: 25px;
}
</style>
</head>
<body>
<div>Ini adalah isi konten dari box model css atau model layout. Pengaturan box model ini dengan lebar sebesar 300px, kemudian padding atau pengaturan jarak antara isi konten dengan border adalah sebesar 25px. Sementara bordernya juga sebesar 25px. Sedang margin atau jarak antara border ke layout utama juga 25px. Sehingga hasilnya akan terlihat seperti ini. Dengan background konten berwarna putih dan border berwarna hitam. </div>
</body>
</html>
Sehingga hasil dari struktur coding tersebut adalah seperti ini :
Itulah cara mengatur model layout atau box model dalam CSS,
yang meliputi margin, padding, border, dan isi konten. Semoga bermanfaat dan
bisa dipahami.
0 Komentar untuk "Mengatur Model Layout atau Box Model CSS"