CSS Box Model
Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilahnya "model kotak" digunakan ketika desain dan tata letak.
Model kotak CSS pada dasarnya adalah sebuah kotak yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, borders, padding, dan konten.
Model kotak memungkinkan kita untuk menambahkan perbatasan sekitar elemen, dan untuk menentukan ruang antara unsur-unsur.
- Konten - Isi dari kotak, di mana teks dan gambar muncul
- Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan
- Border - Sebuah batas yang terjadi di sekitar padding dan konten
- Margin - Menghapus sebuah daerah di luar perbatasan. Margin transparan
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Width dan Height Elemen
Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model kotak bekerja.
Penting: Bila Anda mengatur lebar dan tinggi sifat elemen dengan CSS, Anda hanya mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh elemen, Anda juga harus menambahkan padding, border dan margin.
div {
width: 350px;
padding: 10px;
border: 5px solid navy;
margin: 0;
}
350px (lebar)
+ 20px (kiri + kanan padding)
+ 10px (kiri + kanan perbatasan)
+ 0px (kiri + margin kanan)
= 350px
Total lebar elemen harus dihitung seperti ini:
Lebar total elemen = lebar + bantalan kiri + kanan + bantalan perbatasan kiri + kanan + perbatasan margin kiri + margin kanan
Tinggi total dari elemen harus dihitung seperti ini:
Tinggi total elemen = tinggi + bantalan atas + bantalan bawah + perbatasan atas + batas bawah + margin atas + margin bawah
0 komentar:
Posting Komentar