CSS - Inline Block: Panduan Lengkap untuk Pemula

Hai teman-teman yang sedang belajar pemrograman web! Hari ini, kita akan mendalamkan pengetahuan tentang dunia yang menakjubkan CSS inline-block. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya akan memandu Anda melalui konsep ini secara langkah demi langkah, dengan banyak contoh untuk membuatnya jelas. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Inline-Block?

Sebelum kita masuk ke detilnya, mari kita memahami apa itu inline-block. Bayangkan Anda menata buku di rak. Ada beberapa buku yang Anda ingin letakkan berdiri (seperti elemen inline), dan ada beberapa yang Anda ingin letakkan datar (seperti elemen block). Tapi, apa jika Anda ingin sebuah buku berdiri DAN mengambil ruang tertentu? Itu tempat inline-block memasuki permainan!

Properti display: inline-block CSS menggabungkan fitur dari kedua elemen inline dan block. Itu memungkinkan elemen untuk berada di sebelah yang lain seperti elemen inline, tapi juga menghormati properti lebar dan tinggi seperti elemen block.

mari kita lihat contoh sederhana:

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

Dalam contoh ini, kita telah membuat tiga elemen div dengan kelas inline-block-element. Mereka akan muncul di sebelah yang lain (inline), tapi kita juga dapat mengatur lebar dan tingginya (block).

CSS Inline Block - Perilaku yang Berbeda

Salah satu hal menarik tentang inline-block adalah bagaimana perilakunya berbeda tergantung pada konten. mari kita telusuri ini dengan contoh:

<style>
.container {
font-size: 0; /* Ini menghapus ruang antara elemen inline-block */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
font-size: 16px; /* Reset ukuran font untuk konten */
vertical-align: top; /* Ratakan kotak ke atas */
}
.box1 { background-color: #e74c3c; }
.box2 { background-color: #2ecc71; height: 150px; }
.box3 { background-color: #f39c12; }
</style>

<div class="container">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
</div>

Dalam contoh ini, kita telah membuat tiga kotak dengan tinggi yang berbeda. Perhatikan bagaimana mereka semua diatur ke atas karena vertical-align: top. Mainkanlah dengan properti ini untuk melihat bagaimana ia mempengaruhi perataan!

CSS Inline Block - Link Navigasi

Salah satu penggunaan umum inline-block adalah untuk membuat menu navigasi. mari kita buat navigasi sederhana:

<style>
nav {
background-color: #34495e;
padding: 10px;
}
nav a {
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 20px;
margin-right: 5px;
background-color: #2c3e50;
}
nav a:hover {
background-color: #1abc9c;
}
</style>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

Ini akan membuat batang navigasi yang ramping dengan tautan yang dapat diklik. Properti inline-block memungkinkan kita untuk mengatur padding dan margin pada elemen ini, yang tidak mungkin hanya dengan inline.

CSS Inline Block - Grup Tombol

Inline-block sangat cocok untuk membuat grup tombol. mari kita lihat bagaimana Anda bisa melakukannya:

<style>
.btn-group {
font-size: 0; /* Hapuskan ruang antara tombol */
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: #2980b9;
}
.btn:first-child {
border-radius: 5px 0 0 5px;
}
.btn:last-child {
border-radius: 0 5px 5px 0;
}
</style>

<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>

Ini akan membuat grup tombol yang bagus dimana tombol-tombol terhubung secara mulus.

CSS Inline Block - Gambar dan Teks

Inline-block sangat baik untuk mengatur gambar dengan teks. mari kita lihat bagaimana:

<style>
.image-text {
margin-bottom: 20px;
}
.image-text img {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.image-text p {
display: inline-block;
vertical-align: middle;
width: calc(100% - 110px); /* Sesuaikan berdasarkan lebar gambar */
}
</style>

<div class="image-text">
<img src="https://via.placeholder.com/100" alt="Placeholder">
<pIni adalah teks yang muncul di sebelah gambar. Properti inline-block memungkinkan kita untuk meratakan gambar dan teks secara vertikal.</p>
</div>

Ini akan membuat tata letak yang bagus dengan gambar dan teks di sampingnya.

CSS Inline Block - Batang Progres

Akhirnya, mari kita buat beberapa batang progres menggunakan inline-block:

<style>
.progress-container {
width: 300px;
background-color: #f3f3f3;
margin-bottom: 10px;
}
.progress-bar {
display: inline-block;
height: 20px;
background-color: #4caf50;
text-align: center;
line-height: 20px;
color: white;
}
</style>

<div class="progress-container">
<div class="progress-bar" style="width: 70%;">70%</div>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: 40%;">40%</div>
</div>

Ini akan membuat batang progres sederhana dengan indikator persentase.

Kesimpulan

Dan begitu saja, teman-teman! Kita telah menelusuri properti inline-block yang beragam dan aplikasinya. Dari menu navigasi hingga batang progres, properti ini menawarkan cara fleksibel untuk menata elemen di halaman web Anda.

Ingat, kunci untuk menjadi ahli CSS adalah praktik. Jadi, jangan khawatir untuk mencoba contoh ini dan menciptakan desain unik Anda sendiri. Selamat belajar coding!

Metode	Deskripsi
display: inline-block	Menggabungkan fitur inline dan block
vertical-align	Meratakan elemen inline-block secara vertikal
width dan height	Dapat diterapkan pada elemen inline-block
margin dan padding	Dapat diterapkan di semua arah
Trik ukuran font	Mengatur font-size: 0 pada induk menghapus jarak antara anak inline-block

Credits: Image by storyset