CSS PART 9: penggunaan BOX MODEL.
BOX MODEL
ASSALAMUALAIKUM wr wb.
kali ini saya akan membahas tentang box model teman-teman tau penggunaan box model kalau belum tau berikut ini penjelasannya.
1.Pengertian CSS Box Model
CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
Sebagaimana 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.
2.MAKSUD dan TUJUAN.
untuk mengetahui cara penggunaan height dan width.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur tinggi dan lebar elemen pada tag HTML.
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 bisa mengatur lebar dan tinggi konten ini menggunakan property width dan height.
terdapat padding. Padding adalah jarak antara konten dengan garis tepi (border) element. Sebagai contoh, jika kita membuat sebuah teks tanpa padding, maka teks tersebut akan mulai persis setelah garis tepi. Padding biasa ditambahkan supaya teks tidak menyentuh sisi dalam dari sebuah sel tabel.
Border merupakan garis tepi pembatas element. Kita bisa mengatur berbagai hal tentang border, seperti ketebalan, warna, dan jenis garis yang digunakan.
Margin adalah ‘spasi’ dari sebuah element dengan element lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap element tidak saling menempel satu sama lain.
dibawah ini maksud dari penjelasan tersebut dengan contoh html.
CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
Sebagaimana 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.
2.MAKSUD dan TUJUAN.
untuk mengetahui cara penggunaan height dan width.
3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad
4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur tinggi dan lebar elemen pada tag HTML.
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 bisa mengatur lebar dan tinggi konten ini menggunakan property width dan height.
terdapat padding. Padding adalah jarak antara konten dengan garis tepi (border) element. Sebagai contoh, jika kita membuat sebuah teks tanpa padding, maka teks tersebut akan mulai persis setelah garis tepi. Padding biasa ditambahkan supaya teks tidak menyentuh sisi dalam dari sebuah sel tabel.
Border merupakan garis tepi pembatas element. Kita bisa mengatur berbagai hal tentang border, seperti ketebalan, warna, dan jenis garis yang digunakan.
Margin adalah ‘spasi’ dari sebuah element dengan element lain di sekelilingnya. Margin bersifat transparan dan digunakan agar setiap element tidak saling menempel satu sama lain.
dibawah ini maksud dari penjelasan tersebut dengan contoh html.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
height: 120px;
width: 800px;
border: 9px groove #abd972;
padding: 34px;
margin: 21px;
}
</style>
<meta charset="UTF8">
<title></title>
</head>
<body>
<h2>penggunaan box model</h2>
<p>CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
<br>Sebagaimana 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.
</br>
</p>
</body>
</html>
<html lang="en">
<head>
<style>
p{
height: 120px;
width: 800px;
border: 9px groove #abd972;
padding: 34px;
margin: 21px;
}
</style>
<meta charset="UTF8">
<title></title>
</head>
<body>
<h2>penggunaan box model</h2>
<p>CSS Box Model adalah sebuah konsep dimana setiap element yang terdapat pada halaman web diproses sebagai kotak (box). Mulai dari paragraf, header, form, gambar, logo hingga video, sebenarnya di tampilkan oleh web browser sebagai ‘box’.
<br>Sebagaimana 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.
</br>
</p>
</body>
</html>
ini hasil dari script di atas:
CATATAN:Bila Anda mengatur lebar dan tinggi sifat suatu unsur dengan CSS, Anda hanya mengatur lebar dan tinggi dari area konten . Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, perbatasan dan margin.
REFERENSI:
Sekian dari artikel saya semoga bermanfaat.
WASSALAMUALAIKUM wr wb.
Komentar
Posting Komentar