Tutorial Belajar CSS Part 10 - Mengatur Height and Width di CSS

• 10/16/2023
• Dimas Ahmad Rizal
• 35

Tutorial Belajar CSS Part 10: Mengatur Height and Width di CSS

Pengaturan dimensi elemen menggunakan properti height (tinggi) dan width (lebar) adalah elemen kunci dalam mengelola tata letak dan penampilan elemen pada halaman web. Dalam tutorial ini, kita akan membahas penggunaan properti height dan width dalam CSS.

1. Mengatur Lebar (Width)

Menentukan Lebar untuk Elemen

div {
    width: 300px;
}

Menggunakan Persentase sebagai Lebar

div {
    width: 50%;
}

2. Mengatur Tinggi (Height)

Menentukan Tinggi untuk Elemen

div {
    height: 150px;
}

Menggunakan Persentase sebagai Tinggi

div {
    height: 25%;
}

3. Penggunaan Properti Max dan Min

Properti Max-Width dan Max-Height

div {
    max-width: 500px;
    max-height: 300px;
}

Properti Min-Width dan Min-Height

div {
    min-width: 200px;
    min-height: 100px;
}

4. Mengatur Dimensi Gambar

Mengatur Dimensi Gambar

img {
    width: 100%;
    height: auto;
}

5. Penggunaan Nilai Auto

Menggunakan Nilai Auto

div {
    width: auto;
}

Keuntungan Penggunaan Properti Height dan Width

• Kontrol Tata Letak: Memungkinkan pengaturan dimensi elemen untuk memengaruhi tata letak.
• Responsivitas: Memungkinkan elemen menyesuaikan diri dengan ukuran layar dan perangkat.
• Kustomisasi: Memungkinkan penyesuaian dimensi elemen sesuai kebutuhan desain.

Kesimpulan

Mengatur dimensi elemen dengan properti height dan width dalam CSS adalah langkah kunci dalam menata tata letak dan penampilan halaman web. Properti ini memungkinkan pengaturan yang fleksibel terhadap elemen, memungkinkan responsivitas desain, serta mempengaruhi tampilan keseluruhan halaman. Pemahaman yang baik tentang penggunaan properti height dan width dapat membantu dalam mencapai desain yang responsif dan menarik pada halaman web Anda.