CSS - Inline Block: Panduan Komprehensif untuk Pemula

Hai teman-teman, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menakjubkan dari 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 seperti kristal. Jadi, ambil minuman favorit Anda, duduk nyaman, dan mari kita mulai perjalanan yang menarik ini bersama!

Apa Itu Inline-Block?

Sebelum kita masuk ke hal-hal khusus, mari kita pahami apa itu inline-block. Bayangkan Anda menata buku di rak. Ada beberapa buku yang Anda inginkan untuk berdiri (seperti elemen inline), dan ada beberapa yang Anda inginkan untuk diletakkan datar (seperti elemen block). Tetapi, apa jika Anda ingin sebuah buku berdiri DAN mengambil jumlah ruang tertentu? Itu tempat inline-block berada!

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 tampak sebelah yang lain (inline), tapi kita juga dapat menyetel lebar dan tingginya (block).

CSS Inline Block - Perilaku Berbeda

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

<style>
.container {
font-size: 0; /* Ini menghilangkan 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 berada di atas karena vertical-align: top. Mainkan dengan properti ini untuk melihat bagaimana itu mempengaruhi perataan!

CSS Inline Block - Link Navigasi

Salah satu penggunaan umum inline-block adalah untuk membuat menu navigasi. mari kita buat bar 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 membuat bar navigasi yang ramping dengan tautan yang dapat diklik. Properti inline-block memungkinkan kita untuk menyetel 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; /* Hilangkan 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 membuat grup tombol yang bagus di mana tombol-tombol terhubung tanpa lubang.

CSS Inline Block - Gambar dan Teks

Inline-block sangat baik untuk meratakan 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">
<p>Ini adalah teks yang muncul di sebelah gambar. Properti inline-block memungkinkan kita untuk meratakan gambar dan teks secara vertikal.</p>
</div>

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

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 membuat batang progres sederhana dengan indikator persentase.

Kesimpulan

Dan begitu, teman-teman! Kita telah mengeksplorasi 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 menguasai CSS adalah praktik. Jadi, jangan takut untuk mencoba contoh ini dan membuat desain unik Anda sendiri. Selamat coding!

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

Credits: Image by storyset