Belajar Koding HTML & CSS Bagian 17: Mengukur Ukuran Height dan Width
.png)
Height dan Width dalam CSS adalah properti yang digunakan untuk mengatur tinggi dan lebar suatu elemen HTML. Properti height menentukan tinggi vertikal elemen, sementara properti width menentukan lebar horizontal elemen
Untuk belajar mengatur ukuran tinggi (height) dan lebar (width) elemen HTML menggunakan CSS, Anda dapat mengikuti panduan berikut:
📏 Mengatur Width dan Height di CSS
CSS menyediakan properti width dan height untuk menentukan ukuran elemen.
Contoh Dasar:
div {
width: 300px;
height: 150px;
background-color:
lightblue;
}
Kode di atas akan membuat elemen <div> dengan lebar 300 piksel dan tinggi 150 piksel.
📐 Satuan Ukuran yang Dapat Digunakan
Anda dapat
menggunakan berbagai satuan untuk menentukan ukuran:
- px (piksel): Ukuran tetap.
- % (persentase): Relatif terhadap elemen induk.
- em dan rem: Relatif terhadap ukuran font.
- vh dan vw: Relatif terhadap tinggi dan lebar viewport.
📦 Box Model dan Ukuran Elemen
Perlu diingat bahwa width dan height hanya mengatur ukuran konten, tidak termasuk padding, border, dan margin. Untuk mengubah perilaku ini, Anda bisa menggunakan properti box-sizing:
div {
box-sizing:
border-box;
}
Dengan box-sizing: border-box;, padding dan border akan dimasukkan dalam perhitungan width
dan height.
🔄 Ukuran Dinamis dan Responsif
Untuk
membuat elemen yang responsif terhadap ukuran layar, Anda dapat menggunakan
persentase atau satuan viewport:
div {
width: 50%;
height: 50vh;
}
Kode di atas
akan membuat elemen dengan lebar 50% dari elemen induknya dan tinggi 50% dari
tinggi viewport.
Mengatur Ukuran Elemen dengan CSS
CSS menyediakan properti height dan width untuk mengatur tinggi dan lebar elemen. Nilai-nilai yang dapat digunakan antara lain:
- px (piksel): Ukuran absolut.
- % (persentase): Relatif terhadap elemen
induk.
- auto: Nilai default; ukuran
ditentukan oleh konten.
- em, rem, vh, vw: Unit relatif lainnya.
Contoh penggunaan:
<!DOCTYPE html>
<html>
<head>
<style>
.kotak {
width: 300px;
height: 150px;
background-color:
lightblue;
}
</style>
</head>
<body>
<div class="kotak">Ini
kotak dengan ukuran tetap</div>
</body>
</html>
Dalam contoh
di atas, elemen <div> dengan kelas kotak
memiliki lebar 300 piksel dan tinggi 150 piksel.
📐 Menggunakan Persentase
Menggunakan
persentase memungkinkan elemen menyesuaikan ukurannya berdasarkan elemen
induknya.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
height: 300px;
background-color:
lightgray;
}
.kotak {
width: 50%;
height: 50%;
background-color:
lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="kotak">Ukuran
relatif</div>
</div>
</body>
</html>
Di sini, .kotak
memiliki lebar dan tinggi 50% dari .container.
📦 Memahami Box Model dan box-sizing
Secara
default, ukuran width dan height hanya mencakup konten, tidak
termasuk padding dan border. Untuk memasukkan padding dan border dalam
perhitungan ukuran total, gunakan:
* {
box-sizing:
border-box;
}
Dengan box-sizing: border-box;, padding dan border akan dihitung dalam width dan height, sehingga memudahkan pengaturan layout.
0 Response to "Belajar Koding HTML & CSS Bagian 17: Mengukur Ukuran Height dan Width"
Post a Comment