Belajar Koding HTML & CSS Bagian 20: Mengukur Width CSS
.png)
Untuk mengatur lebar (width) elemen dalam HTML menggunakan CSS, Anda dapat memanfaatkan properti width. Properti ini menentukan lebar area konten dari suatu elemen, tidak termasuk padding, border, atau margin, kecuali jika Anda mengubah perilaku ini dengan properti box-sizing
📐 Cara Mengatur Width dengan CSS
Properti width
dapat ditentukan dalam berbagai satuan:
- Piksel
(px): Ukuran
tetap.
- Persentase
(%): Relatif
terhadap elemen induknya.
- auto: Nilai default; browser
menentukan lebar secara otomatis.
- fit-content: Lebar menyesuaikan dengan
konten, hingga batas maksimum yang tersedia.
- initial: Mengatur ke nilai default.
- inherit: Mewarisi nilai dari elemen
induk.
Contoh penggunaan:
/* Lebar tetap */
div {
width: 300px;
}
/* Lebar relatif terhadap elemen induk */
div {
width: 50%;
}
/* Lebar otomatis sesuai konten */
div {
width: auto;
}
/* Lebar menyesuaikan dengan konten */
div {
width: fit-content;
}
📦 Memahami Box Model dan box-sizing
Secara default, width hanya mengatur area konten. Padding dan border ditambahkan di luar lebar tersebut. Jika Anda ingin padding dan border termasuk dalam lebar total, gunakan
div {
box-sizing:
border-box;
}
Dengan box-sizing: border-box, lebar total elemen mencakup konten, padding, dan border. Ini membantu dalam membuat layout yang konsisten dan responsif.
🧱 Contoh Praktis
Berikut contoh HTML dan CSS
sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<style>
.kotak {
width: 300px;
height: 150px;
background-color:
lightblue;
padding: 20px;
border: 5px
solid blue;
box-sizing:
border-box;
}
</style>
</head>
<body>
<div class="kotak">
Ini adalah kotak
dengan lebar 300px, termasuk padding dan border.
</div>
</body>
</html>
Tampilan Hasil (Output) Box Width CSS
Dalam contoh di atas, meskipun ada padding dan border, lebar total elemen tetap 300px karena penggunaan box-sizing: border-box
📏 Tips Tambahan
- Gunakan
% untuk desain yang responsif,
agar elemen menyesuaikan dengan ukuran layar.
- Gunakan
max-width untuk membatasi lebar maksimum
elemen, mencegahnya terlalu besar pada layar lebar.
- Gunakan
min-width untuk memastikan elemen tidak
terlalu kecil, menjaga keterbacaan dan tata letak.
0 Response to "Belajar Koding HTML & CSS Bagian 20: Mengukur Width CSS"
Post a Comment