Box Model
CSS
Semua elemen HTML dapat dianggap
sebagai kotak. Dalam CSS, istilah " Box Model" digunakan saat
membicarakan desain dan tata letak. Model kotak CSS pada dasarnya adalah kotak
yang membungkus setiap elemen HTML. Terdiri dari: margin, border, padding, dan
konten yang sebenarnya. Gambar di bawah menggambarkan model kotak:
Penjelasan dari berbagai bagian:
·
Konten - Isi kotak,
tempat teks dan gambar muncul
·
Padding -
Membersihkan area di sekitar konten. Padding transparan
·
Perbatasan -
Perbatasan yang mengelilingi bantalan dan konten
·
Margin - Membersihkan
area di luar perbatasan. Marginnya transparan
Model kotak memungkinkan kita untuk
menambahkan batas di sekitar elemen, dan untuk menentukan ruang antar elemen.
Contohnya:
Contohnya:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Width and Height di Elemen
Untuk mengatur lebar dan tinggi elemen dengan benar di semua browser, Anda perlu mengetahui bagaimana model kotak bekerja.
Penting: Bila Anda menetapkan sifat lebar dan tinggi
elemen dengan CSS, Anda cukup mengatur lebar dan tinggi area konten. Untuk
menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, border dan
margin.
Asumsikan kita ingin menata elemen <div> agar memiliki lebar total 350 pixel(px):
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Inilah perhitungannya:
320 piksel (lebar)
+ 20px (padatan kiri + kanan)
+ 10 px (batas kiri + kanan)
+ 0px (margin kiri + kanan)
= 350px
- Lebar total elemen harus dihitung seperti ini:
Total elemen lebar = lebar +
padding kiri + padding kanan + batas kiri + batas kanan + margin kiri + margin
kanan
- Tinggi total elemen harus dihitung seperti ini:
Total elemen tinggi = tinggi +
padding atas + bantalan bawah + batas atas + batas bawah + margin atas + margin
bawah
1 komentar:
Write komentartes
ReplyEmoticonEmoticon