CSS - Model Box
Hampir
semua elemen HTML bisa di anggap merupakan sebuah kotak / Boxes. Dalam CSS,
istilah "
box model " digunakan ketika berbicara tentang 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 contoh sebuah model kotak:
Contoh
skematis elemen HTML:
Margin
Border
Padding
Content
Penjelasan
dari bagian tersebut:
Content
- Konten kotak, tempat teks dan gambar muncul
Padding -
Menghapus area di sekitar konten. Padding transparan
Border -
Batas yang mengelilingi padding dan konten
Margin
- Menghapus area di luar perbatasan. Marginnya transparan
Model
kotak memungkinkan kita untuk menambahkan batas di sekitar elemen, dan untuk
menentukan ruang antar elemen.
CSS
.incrud-box {
width: 400px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
HTML
<html>
<head>
<link href="cssincrud.css"
rel="stylesheet">
<title>
Contoh - Incrud
</title>
</head>
<body>
<div class="incrud-box">
Conoth Box
model -incrud
</div>
</body>
</html>
Preview:
Contoh
box model – incrud adalaha content.
Dan garis hijau merupakan border.
Lebar dan Tinggi (Width
and Height) Element
Untuk
mengatur width dan tinggi elemen dengan benar di semua browser, terlebih dahulu
tahu cara kerja box model.
Penting:
Saat Anda menetapkan properti width dan tinggi(Width and Height) elemen dengan
CSS, cukup mengatur lebar dan tinggi area konten. Untuk menghitung ukuran penuh
elemen, harus juga menambahkan padding, border, dan margin.
Asumsikan
kita ingin menata elemen <div>
untuk memiliki width total 350px:
CSS
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Berikut
perhitungannya:
320px
(lebar)
+
20px (padding kiri + kanan)
+
10px (batas kiri + kanan)
+
0px (margin kiri + kanan)
=
350px
Lebar
total elemen harus dihitung seperti ini:
lebar
total elemen = width + padding kiri + padding kanan + border kiri + right kanan
+ margin kiri + margin kanan
Tinggi
total elemen harus dihitung seperti ini:
Tinggi
total elemen = height + padding + padding bawah + border atas
+ border bawah + margin atas + margin bawah
Demikian Artikel mengenai CSS - Model Box , semoga bermanfaat
Post a Comment for "CSS - Model Box"