CSS - Model Box
2/08/2019
Add Comment
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
0 Response to "CSS - Model Box"
Post a Comment