CSS Display: Block, Inline, Inline-Block, dan None.

Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Berikut adalah versi perbaikan dari draf materi CSS Anda. Saya telah melengkapi tag HTML yang hilang pada contoh elemen bawaan, merapikan struktur kodenya, dan menyusun tabel serta poin-poinnya agar lebih profesional dan siap disalin untuk modul atau dokumentasi Anda.

Memahami CSS Display: Block, Inline, Inline-Block, dan None

Setiap elemen HTML memiliki nilai display bawaan tergantung pada jenis tagnya. Namun, kita bisa mengubah perilaku tersebut menggunakan CSS untuk memenuhi kebutuhan desain tata letak (layout) tertentu.

1. Display: Block

Elemen secara otomatis mengambil seluruh lebar ruang yang tersedia (100% lebar kontainer) dan selalu dimulai di baris baru.

• Perilaku: Bisa diatur width, height, margin, dan padding-nya secara bebas.

• Contoh Elemen Bawaan: <div>, <p>, <h1> - <h6>, <ul>, <li>, <section>, <article>.

• Analogi: Seperti batu bata yang ditumpuk; satu bata akan menghabiskan satu baris penuh dari kiri ke kanan.

2. Display: Inline

Elemen hanya mengambil ruang sebanyak yang diperlukan sesuai kontennya dan tidak memulai baris baru.

• Perilaku: Tidak bisa diatur width dan height. Pengaturan margin dan padding vertikal (atas-bawah) tidak akan mendorong elemen lain di sekitarnya (bisa tumpang tindih).

• Contoh Elemen Bawaan: <span>, <a>, <strong>, <em>.

• Analogi: Seperti kata dalam sebuah kalimat; ia hanya memakan ruang sesuai panjang katanya dan berjejer menyamping.

3. Display: Inline-Block

Perpaduan sempurna antara inline dan block. Elemen tetap berada di baris yang sama dengan elemen lain, tetapi ia memiliki sifat fleksibel seperti block.

• Perilaku: Tetap berjajar secara horizontal, namun bisa diatur width, height, margin, dan padding-nya secara penuh tanpa merusak tata letak di sekitarnya.

• Kegunaan: Sangat populer digunakan untuk elemen navigasi (menu), tombol yang berjajar, atau grid produk/berita.

4. Display: None

Elemen benar-benar dihapus atau disembunyikan dari halaman web.

• Perilaku: Elemen tidak hanya tidak terlihat, tetapi ruang yang seharusnya ditempati elemen tersebut juga hilang (seolah-olah elemen itu tidak pernah ada di struktur HTML).

• Kegunaan: Sering digunakan untuk menyembunyikan menu pada perangkat mobile (hamburger menu) atau membuat fitur toggle menggunakan JavaScript.

• Perbedaan dengan visibility: hidden: Jika menggunakan visibility: hidden, elemen menjadi transparan/tidak terlihat, tapi ruangnya tetap ada dan dibiarkan kosong.

Tutorial: Mengubah Perilaku Elemen

Mari kita praktikkan cara mengubah link (<a>) yang secara default bersifat inline menjadi sebuah tombol yang bergaya inline-block.

Struktur HTML:

<div class="menu"> <a href="#" class="nav-link">Home</a> <a href="#" class="nav-link">Berita</a> <a href="#" class="nav-link">Kontak</a>
</div>

Kode CSS:

.nav-link { /* Default link adalah inline (tidak bisa diberi height/width). Kita ubah agar bisa diatur ukurannya dan tetap berjejer ke samping */ display: inline-block; width: 100px; padding: 10px; text-align: center; text-decoration: none; background-color: #3498db; color: white; border-radius: 5px; margin-right: 10px;
} .nav-link:hover { background-color: #2980b9;
}

Tabel Perbandingan Cepat

Tips Profesional untuk Developer

• Centering: Untuk menengahkan elemen block, gunakan margin: 0 auto; (pastikan elemen tersebut memiliki width). Untuk menengahkan elemen inline atau inline-block, gunakan properti text-align: center; pada elemen induknya.

• Space Antar Elemen: Hati-hati saat menggunakan inline-block. Terkadang ada sedikit celah (gap) sekitar 4px antar elemen yang disebabkan oleh spasi atau Enter di kode HTML Anda. Anda bisa mengatasinya dengan Flexbox atau menghapus spasi di HTML.

• Optimasi UI: Properti display: none; sangat berguna saat Anda membangun fitur seperti RSS Feed atau Trending Score di proyek SatuMedia, terutama jika Anda ingin menyembunyikan detail teks yang terlalu panjang pada tampilan layar kecil (mobile).

Memahami perbedaan keempat nilai display ini adalah kunci fundamental sebelum Anda melangkah ke materi layout modern yang lebih kompleks seperti Flexbox atau CSS Grid.