CSS Dasar #17 - Width, Height, Min-Width, Max-Width, Min-Height, Max-Height

byFerdian Rahabista -
0

Setelah memahami Box Model dan margin, sekarang saatnya belajar tentang ukuran elemen. Properti width dan height menentukan lebar dan tinggi elemen, sementara min-width, max-width, min-height, dan max-height memberikan batasan pada ukuran tersebut. Memahami properti ini sangat penting untuk membuat layout yang responsif dan terkontrol.

1. width (Lebar Elemen)

Properti width mengatur lebar konten sebuah elemen. Nilai bisa dalam satuan px, rem, em, %, vw, atau auto.

Contoh:

<style>
    .w-200 { width: 200px; background: #3b82f6; color: white; padding: 10px; }
    .w-50 { width: 50%; background: #22c55e; color: white; padding: 10px; }
    .w-auto { width: auto; background: #f59e0b; color: white; padding: 10px; }
</style>

<div class="w-200">width: 200px</div>
<div class="w-50">width: 50%</div>
<div class="w-auto">width: auto (default, sesuai konten)</div>
width: 200px
width: 50% (dari parent)
width: auto (lebar sesuai konten + padding)

2. height (Tinggi Elemen)

Properti height mengatur tinggi konten sebuah elemen. Mirip dengan width, bisa menggunakan berbagai satuan.

Contoh:

<style>
    .h-100 { height: 100px; background: #3b82f6; color: white; }
    .h-auto { height: auto; background: #22c55e; color: white; }
</style>

<div class="h-100">height: 100px (tinggi tetap 100px)</div>
<div class="h-auto">height: auto (tinggi sesuai konten)</div>
height: 80px (tinggi tetap 80px)
height: auto (tinggi sesuai konten, di sini sekitar 40px karena padding)
Catatan: Untuk elemen block tanpa konten, height: auto akan menghasilkan tinggi 0. Untuk elemen inline, width dan height tidak berpengaruh (kecuali diubah ke display: inline-block atau block).

3. min-width (Lebar Minimal)

min-width menetapkan lebar minimum sebuah elemen. Elemen tidak akan lebih kecil dari nilai ini, tetapi bisa lebih besar (misal karena konten atau max-width).

Contoh:

<style>
    .min-width-200 {
        min-width: 200px;
        background: #3b82f6;
        color: white;
        display: inline-block;
        padding: 10px;
    }
</style>

<span class="min-width-200">Teks pendek</span>
<span class="min-width-200">Teks yang sangat panjang sekali hingga melebihi 200px</span>
Teks pendek Teks yang sangat panjang sekali hingga melebihi 150px

min-width: 150px → elemen pertama tetap lebar 150px meski teks pendek; elemen kedua lebih lebar karena teks panjang.

4. max-width (Lebar Maksimal)

max-width menetapkan lebar maksimum sebuah elemen. Elemen tidak akan lebih besar dari nilai ini, tetapi bisa lebih kecil. Sangat berguna untuk membuat layout responsif.

Contoh:

<style>
    .container {
        max-width: 600px;
        background: #f0f4f8;
        padding: 20px;
        margin: 0 auto;
    }
    .image {
        max-width: 100%;
        height: auto;
    }
</style>

<div class="container">
    <img class="image" src="https://picsum.photos/800/200" alt="contoh">
    <p>Container ini memiliki max-width: 600px. Gambar memiliki max-width: 100%, sehingga tidak pernah lebih lebar dari container.</p>
</div>
contoh

Container max-width: 500px. Gambar max-width: 100% sehingga tidak overflow.

Tips max-width:
  • max-width: 100%; pada gambar mencegah gambar keluar dari container (responsif).
  • max-width: 1200px; margin: 0 auto; membuat container sentral dengan lebar maksimal di layar besar.

5. min-height (Tinggi Minimal)

min-height menetapkan tinggi minimum sebuah elemen. Elemen tidak akan lebih pendek dari nilai ini, tetapi bisa lebih tinggi (misal karena konten).

Contoh:

<style>
    .card {
        min-height: 150px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 15px;
        margin: 10px;
        display: inline-block;
        width: 200px;
        vertical-align: top;
    }
</style>

<div class="card">Card dengan sedikit konten. Tinggi minimal 150px.</div>
<div class="card">Card dengan banyak konten. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</div>
Card dengan sedikit konten. Tinggi minimal 120px.
Card dengan banyak konten. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Kedua card memiliki min-height: 120px. Card pertama tetap 120px, card kedua lebih tinggi karena konten.

6. max-height (Tinggi Maksimal)

max-height menetapkan tinggi maksimum sebuah elemen. Elemen tidak akan lebih tinggi dari nilai ini, kelebihan konten akan terpotong (perlu overflow).

Contoh:

<style>
    .scroll-box {
        max-height: 100px;
        overflow-y: auto;
        background: #fef9c3;
        border: 1px solid #eab308;
        padding: 10px;
        width: 250px;
    }
</style>

<div class="scroll-box">
    <p>Baris 1</p>
    <p>Baris 2</p>
    <p>Baris 3</p>
    <p>Baris 4</p>
    <p>Baris 5</p>
    <p>Baris 6</p>
</div>

Baris 1

Baris 2

Baris 3

Baris 4

Baris 5

Baris 6

max-height: 80px dengan overflow-y: auto → scrollbar muncul jika konten melebihi tinggi maksimal.

Tips max-height:
  • Gunakan overflow: auto atau overflow-y: auto saat membatasi tinggi agar konten tidak terpotong mental.
  • max-height: 0 dapat digunakan untuk animasi sembunyi/muncul (accordion effect).

Perbandingan width vs max-width vs min-width

Properti Perilaku Contoh Penggunaan
width Lebar tetap (dapat di-override oleh min/max) width: 300px; (lebar pasti 300px)
min-width Lebar minimal, bisa lebih besar (karena konten) min-width: 200px; (tidak pernah kurang dari 200px)
max-width Lebar maksimal, bisa lebih kecil (dari konten) max-width: 100%; (tidak melebihi parent)

Contoh Proyek: Layout Responsif dengan max-width dan min-height

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Width, Height, Min/Max - Demo Responsif</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 20px;
        }
        
        /* Container utama dengan max-width */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 10px;
        }
        
        /* Grid card dengan min-width dan max-width */
        .card-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 30px 0;
        }
        
        .card {
            background: #f8fafc;
            border-radius: 16px;
            padding: 20px;
            flex: 1 1 250px;  /* flex-grow, flex-shrink, flex-basis */
            min-width: 200px;
            max-width: 100%;
            transition: transform 0.2s;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card h3 {
            margin-bottom: 10px;
        }
        
        /* Gambar responsif */
        .responsive-img {
            max-width: 100%;
            height: auto;
            border-radius: 12px;
            margin: 20px 0;
        }
        
        /* Sidebar dengan min-height */
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        
        .sidebar {
            flex: 1;
            min-width: 200px;
            background: #eef2ff;
            border-radius: 12px;
            padding: 15px;
        }
        
        .content {
            flex: 3;
            min-width: 250px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            border: 1px solid #e2e8f0;
        }
        
        /* Scroll area dengan max-height */
        .scroll-area {
            max-height: 150px;
            overflow-y: auto;
            background: #fef9c3;
            border-radius: 8px;
            padding: 10px;
            margin: 15px 0;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: #64748b;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Mengatur Ukuran Elemen dengan Width, Height, Min/Max</h1>
        
        <!-- Card Grid dengan min-width -->
        <div class="card-grid">
            <div class="card">
                <h3>Card 1</h3>
                <p>Kartu ini memiliki min-width: 200px. Jika layar kecil, kartu akan menyesuaikan, tetapi tidak pernah lebih kecil dari 200px.</p>
            </div>
            <div class="card">
                <h3>Card 2</h3>
                <p>Flex basis 250px memungkinkan kartu lebih lebar jika ada ruang.</p>
            </div>
            <div class="card">
                <h3>Card 3</h3>
                <p>Semua kartu memiliki max-width: 100%, sehingga tidak overflow di layar kecil.</p>
            </div>
        </div>
        
        <!-- Gambar responsif dengan max-width -->
        <img class="responsive-img" src="https://picsum.photos/800/300" alt="Responsive image">
        
        <!-- Layout dengan min-height -->
        <div class="flex-container">
            <div class="sidebar">
                <h3>Sidebar</h3>
                <p>Sidebar memiliki min-width: 200px dan min-height: 150px (tidak terlihat karena konten sedikit, tapi bisa diperiksa di dev tools).</p>
            </div>
            <div class="content">
                <h3>Konten Utama</h3>
                <p>Konten memiliki min-width: 250px. Kombinasi flex dan min-width membuat layout responsif.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        
        <!-- Scroll area dengan max-height -->
        <h3>Area dengan max-height dan overflow auto</h3>
        <div class="scroll-area">
            <p>Baris 1: Ini adalah contoh konten yang panjang.</p>
            <p>Baris 2: Area ini memiliki max-height: 150px.</p>
            <p>Baris 3: Jika konten melebihi tinggi maksimal, scrollbar akan muncul.</p>
            <p>Baris 4: Ini baris keempat untuk memenuhi tinggi.</p>
            <p>Baris 5: Baris kelima masih dalam area.</p>
            <p>Baris 6: Baris keenam, seharusnya scroll muncul.</p>
        </div>
        
        <div class="info-box">
            <h3>Ringkasan Properti Ukuran</h3>
            <ul>
                <li><code>width</code> / <code>height</code> → ukuran tetap (bisa di-override min/max)</li>
                <li><code>min-width</code> / <code>min-height</code> → ukuran minimal (tidak boleh lebih kecil)</li>
                <li><code>max-width</code> / <code>max-height</code> → ukuran maksimal (tidak boleh lebih besar)</li>
                <li>Kombinasi <code>max-width: 100%</code> dan <code>height: auto</code> membuat gambar responsif</li>
                <li>Gunakan <code>overflow</code> saat membatasi tinggi untuk menangani kelebihan konten</li>
            </ul>
            
            <h3 style="margin-top: 15px;">Satuan yang Sering Digunakan:</h3>
            <ul>
                <li><code>px</code> → pixel (ukuran tetap, tidak responsif)</li>
                <li><code>%</code> → persen dari parent (responsif)</li>
                <li><code>vw</code> / <code>vh</code> → persen dari viewport (lebar/tinggi layar)</li>
                <li><code>rem</code> / <code>em</code> → relatif terhadap ukuran font</li>
            </ul>
        </div>
    </div>
    
    <footer>
        <p>© 2024 - Belajar CSS ukuran elemen | width, height, min-width, max-width, min-height, max-height</p>
    </footer>

</body>
</html>

Hasil visual halaman:

Card Grid dengan min-width

Card 1 - min-width 180px
Card 2
Card 3
Ringkasan: max-width untuk gambar, min-width untuk kartu, max-height dengan overflow untuk area scroll.

Praktik Terbaik untuk Layout Responsif

  • Gunakan max-width: 100%; height: auto; pada semua gambar agar tidak overflow.
  • Gunakan max-width pada container utama (misal: 1200px) dengan margin: 0 auto untuk memusatkan konten di layar lebar.
  • Gunakan min-width pada elemen flex/grid untuk mencegah elemen mengecil terlalu banyak di layar kecil.
  • Hindari width tetap dalam pixel untuk container utama jika ingin responsif; gunakan persen atau max-width.

Kesalahan Umum Pemula

  • Lupa bahwa width dan height tidak berlaku untuk elemen inline → Inline element (span, a) tidak merespons width/height. Gunakan display: inline-block;.
  • Mengatur width dan height tetap pada gambar tanpa max-width → Gambar bisa overflow di layar kecil. Gunakan max-width: 100%.
  • Mengira min-width dan max-width bisa menggantikan width → Min dan max hanya memberi batasan, bukan nilai pasti.
  • Lupa overflow saat menggunakan max-height → Konten yang melebihi max-height akan terpotong atau overflow; tambahkan overflow: auto.
  • Menggunakan satuan tetap (px) untuk container utama → Website tidak responsif di HP. Gunakan max-width + width: 100%.
Debugging Tips:
  • Buka Developer Tools (F12) → inspect elemen → lihat computed width/height untuk mengetahui ukuran aktual.
  • Cek apakah ada properti yang saling konflik (min-width lebih besar dari max-width).
  • Gunakan outline untuk melihat batas elemen saat debugging layout responsif.

Latihan Singkat

  1. Buat container dengan max-width: 600px dan margin: 0 auto, lihat bagaimana di layar lebar.
  2. Buat gambar dengan lebar 800px, lalu beri max-width: 100% dan lihat di layar kecil.
  3. Buat 3 kotak inline-block dengan min-width: 150px, width: 100%, dan lihat perilakunya.
  4. Buat area komentar dengan max-height: 100px dan overflow-y: auto, isi dengan banyak teks hingga scroll.
  5. Buat card dengan min-height: 200px; jika konten sedikit, tetap tinggi 200px; jika banyak, membesar.

Intisari Hari Ini

  • width / height → ukuran tetap (dapat di-override min/max)
  • min-width / min-height → ukuran minimal (tidak boleh lebih kecil)
  • max-width / max-height → ukuran maksimal (tidak boleh lebih besar)
  • max-width: 100% pada gambar membuat gambar responsif
  • max-width: 1200px; margin: 0 auto; membuat container sentral di layar lebar
  • Gunakan overflow: auto saat membatasi tinggi untuk menampilkan scroll
  • Untuk elemen inline, width/height tidak berpengaruh; ubah ke inline-block atau block
Tantangan: Buat sebuah Halaman Blog Responsif yang memanfaatkan min-width, max-width, dan max-height! Persyaratan:
  • Container utama dengan max-width: 1000px dan margin: 0 auto
  • Gambar dalam artikel menggunakan max-width: 100% agar responsif
  • Card untuk artikel terkait menggunakan min-width: 200px dalam grid flex
  • Area komentar dengan max-height: 150px dan overflow-y: auto (jika banyak komentar)
  • Sidebar memiliki min-width: 200px di layar besar, tetapi di layar kecil (media query) berubah menjadi 100%
  • Tambahkan kotak penjelasan yang menunjukkan properti ukuran apa saja yang digunakan dan alasannya

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #16 - Margin Collapse dan Negative Margin
Artikel Selanjutnya: CSS Dasar #18 - Overflow: visible, hidden, scroll, auto

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال