CSS box model adalah prinsip pada elemen halaman website yang diproses dan ditampilkan dalam bentuk kotak. Ini berguna dalam 'peng-kotak-an' bagian bagian halaman pada website. Sebut saja paragraf, header, gambar dll.
Ada beberapa bagian yan harus dikenali dalam pembuaatn box model CSS ini. Mereka adalah konten, padding, border dan margin. Unsur unsur inilah yang membentuk CSS Box Model. Bagian tersebut bisa digambarkan sebagai berikut.
Sebagai contoh penggunaan untuk perkenalan awal, bisa diperhatikan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div, p {
width: 300px;
height: 50px;
padding: 15px;
border: 5px solid red;
margin: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div>Taruh Konten di sini</div>
<p>Taruh Konten di sini</p>
</body>
</html>
Bagaimana tampilan yang anda peroleh? Akan terlihat kotak dengan latar kuning dengan ukuran sesuai yang didefeniskn pada kode CSS di atas. Untuk pengaturan tampilan lebih lanjut akan dilanjutkan pada catatan berikutnya.
Ada beberapa bagian yan harus dikenali dalam pembuaatn box model CSS ini. Mereka adalah konten, padding, border dan margin. Unsur unsur inilah yang membentuk CSS Box Model. Bagian tersebut bisa digambarkan sebagai berikut.
Property dalam CSS Box Model
Konten adalah bagian yang akan ditampilkan atau isi dari kotak tersebut. Lalu untuk menampilkan agar terlihat rapi digunakan beberapa property. Yaitu width untuk lebar, height untuk tinggi, border untuk bingkai, padding untuk jarak dari pnggir dan margin untuk batas.
Sebagai contoh penggunaan untuk perkenalan awal, bisa diperhatikan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div, p {
width: 300px;
height: 50px;
padding: 15px;
border: 5px solid red;
margin: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div>Taruh Konten di sini</div>
<p>Taruh Konten di sini</p>
</body>
</html>
Bagaimana tampilan yang anda peroleh? Akan terlihat kotak dengan latar kuning dengan ukuran sesuai yang didefeniskn pada kode CSS di atas. Untuk pengaturan tampilan lebih lanjut akan dilanjutkan pada catatan berikutnya.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment