Demo Display Types

by oktaviardi pratama

HTML

<h2>Perbedaan Display CSS</h2>
    <p>Semua kotak di bawah memiliki CSS <code>width: 200px</code> dan <code>height: 100px</code>.</p>

    <!-- 1. Block -->
    <div class="box box-block">
        Display: Block
    </div>

    <!-- 2. Inline -->
    <div class="box box-inline">
        Display: Inline
    </div>

    <!-- 3. Inline-Block -->
    <div class="box box-inline-block">
        Display: Inline-Block
    </div>

    <!-- 4. None (Tidak akan muncul) -->
    <div class="box box-none">
        Display: None (Saya Hilang)
    </div>

    <p style="margin-top: 20px;">
        <strong>Observasi:</strong><br>
        1. Kotak Biru (Block) turun ke baris baru.<br>
        2. Kotak Merah (Inline) <strong>mengecil</strong> mengikuti teks (width/height diabaikan) dan sejajar.<br>
        3. Kotak Hijau (Inline-Block) ukurannya <strong>tepat 200x100</strong> dan sejajar.<br>
        4. Kotak Orange tidak terlihat sama sekali.
    </p>

CSS

/* Styling dasar agar kotak terlihat */
        .box {
            width: 200px;       /* Kita paksa lebar 200px */
            height: 100px;      /* Kita paksa tinggi 100px */
            color: rgb(0, 0, 0);
            text-align: center;
            line-height: 100px; /* Agar teks tengah vertikal */
            margin: 10px;
            font-weight: bold;
            border: 2px solid #333;
        }

        /* 1. Display Block (Default untuk div) */
        .box-block {
            display: block;
            background-color: #3498db; /* Biru */
        }

        /* 2. Display Inline */
        .box-inline {
            display: inline;
            background-color: #e74c3c; /* Merah */
            /* Perhatikan: width & height TIDAK akan berlaku di sini! */
        }

        /* 3. Display Inline-Block */
        .box-inline-block {
            display: inline-block;
            background-color: #2ecc71; /* Hijau */
            /* Width & height akan berlaku di sini */
        }

        /* 4. Display None (Bonus) */
        .box-none {
            display: none;
            background-color: #f39c12;
            color:#333!important;
        }