Background Image

Postingan

Mengenal Properti: BLOCK< INLINE, Dan INLINE-BLOCK

Dalam pengembangan web, mengatur cara elemen HTML ditampilkan adalah kunci utama dalam membuat layout yang rapi dan sesuai desain. CSS menyediakan properti display untuk mengontrol perilaku dasar suatu elemen di halaman. Tiga nilai yang paling umum digunakan adalah block, inline, dan inline-block.

Gambar Mengenal Properti: BLOCK< INLINE, Dan INLINE-BLOCK
06 Agustus 2025 09:36 Arif Shabana CSS

Mengenal Properti Display: BLOCK, INLINE, dan INLINE-BLOCK dalam CSS

Dalam pengembangan web, mengatur cara elemen HTML ditampilkan adalah kunci utama dalam membuat layout yang rapi dan sesuai desain. CSS menyediakan properti display untuk mengontrol perilaku dasar suatu elemen di halaman. Tiga nilai yang paling umum digunakan adalah block, inline, dan inline-block.

Walaupun terlihat sederhana, perbedaan ketiganya memiliki dampak besar terhadap struktur halaman, aliran dokumen (document flow), dan cara elemen berinteraksi dengan elemen lain.

1. Sekilas Tentang Properti display

Properti display menentukan bagaimana sebuah elemen HTML dirender di halaman. Tiga nilai yang paling sering digunakan dalam layout dasar adalah:

  • block → elemen mengambil seluruh lebar baris dan memulai baris baru.
  • inline → elemen hanya selebar konten dan tetap berada di baris yang sama dengan elemen lain.
  • inline-block → elemen tetap berada di baris yang sama seperti inline tetapi dapat diatur ukuran lebar dan tingginya seperti block.

2. Implementasi Dasar

a. Block

Elemen block digunakan saat kita ingin elemen mengambil satu baris penuh dan memisahkan dirinya dari elemen lain.

Contoh:

<style>

.block {

  display: block;

  width: 300px;

  height: 60px;

  background-color: #4da3ff;

  margin-bottom: 15px;

}

</style>

<div class="block">Ini elemen BLOCK 1</div>

<div class="block">Ini elemen BLOCK 2</div>

Hasilnya:

  • Kedua <div> akan berada di baris terpisah.
  • Masing-masing memiliki lebar 300px dan tinggi 60px.
  • Margin bawah memberi jarak antar elemen.

b. Inline

Elemen inline cocok untuk teks atau komponen kecil seperti link dan ikon, yang ingin tetap berada di aliran teks.

Contoh:

<style>

.inline {

  display: inline;

  background-color: yellow;

  padding: 5px;

}

</style>

<p>

  Ini adalah <span class="inline">teks inline 1</span> dan 

  <span class="inline">teks inline 2</span> di satu baris.

</p>

Hasilnya:

  • Kedua <span> tetap berada di baris yang sama.
  • Lebar hanya mengikuti isi teksnya.
  • Lebar dan tinggi tidak bisa diatur secara langsung.

c. Inline-Block

inline-block berguna saat kita ingin elemen tetap sejajar horizontal tetapi tetap bisa diatur lebar dan tingginya.

Contoh:

<style>

.inline-block {

  display: inline-block;

  width: 120px;

  height: 50px;

  background-color: lightgreen;

  margin: 5px;

  text-align: center;

  line-height: 50px;

}

</style>

<div class="inline-block">Box 1</div>

<div class="inline-block">Box 2</div>

<div class="inline-block">Box 3</div>

Hasilnya:

  • Semua elemen berada di baris yang sama.
  • Lebar dan tinggi dapat diatur.
  • Margin horizontal menciptakan jarak antar elemen.

3. Implementasi Lanjutan: Layout Menu Navigasi

Dengan memahami perbedaan ini, kita bisa membuat menu navigasi horizontal menggunakan inline-block:

<style>

nav {

  background-color: #333;

  padding: 10px;

}

nav a {

  display: inline-block;

  color: white;

  padding: 10px 20px;

  text-decoration: none;

}

nav a:hover {

  background-color: #555;

}

</style>

<nav>

  <a href="#">Home</a>

  <a href="#">Tentang</a>

  <a href="#">Layanan</a>

  <a href="#">Kontak</a>

</nav>

Penjelasan:

  • <a> menggunakan inline-block supaya tetap sejajar horizontal tetapi bisa diberi padding seperti tombol.
  • Hover memberi efek saat diarahkan kursor.

4. Implementasi Lanjutan: Layout Card Produk

Kita juga bisa mengatur beberapa card produk sejajar dengan inline-block:

<style>

.card {

  display: inline-block;

  width: 200px;

  margin: 10px;

  padding: 15px;

  border: 1px solid #ccc;

  background-color: white;

  vertical-align: top;

}

.card img {

  width: 100%;

  height: auto;

}

.card h3 {

  margin: 10px 0;

}

</style>

<div class="card">

  <img src="produk1.jpg" alt="Produk 1">

  <h3>Produk 1</h3>

  <p>Rp50.000</p>

</div>

<div class="card">

  <img src="produk2.jpg" alt="Produk 2">

  <h3>Produk 2</h3>

  <p>Rp60.000</p>

</div>

Penjelasan:

  • Card sejajar horizontal, tetap bisa diatur lebar & tinggi.
  • vertical-align: top mencegah card naik-turun karena perbedaan tinggi.

5. Tips Penggunaan

  • Gunakan block untuk elemen yang memang memisahkan diri dari elemen lain, seperti section, header, footer.
  • Gunakan inline untuk elemen kecil yang mengikuti teks, seperti ikon dalam paragraf.
  • Gunakan inline-block saat perlu elemen sejajar horizontal tapi tetap bisa dikontrol dimensinya.
# CSS # Tutorial

Postingan Terkait