CSS TutorialLesson 28Preview gratis
CSS Inline-block
Lesson ini bagian dari CSS · Semua level
Ringkasan
display: inline-block menggabungkan sifat elemen inline yang mengikuti alur teks dan block yang bisa diatur lebar, tinggi, padding, serta margin vertikal. Elemen ini cocok untuk membuat kotak-kotak sejajar seperti tombol dalam satu baris tanpa mengubah struktur HTML. Perhatikan bahwa spasi kecil antar elemen inline-block bisa muncul dari whitespace di HTML.
Poin kunci
- inline-block mengikuti alur teks sekaligus bisa diberi width, height, padding, dan margin penuh.
- Elemen berdampingan dengan inline-block berbaris sejajar selama muat dalam satu baris.
- Whitespace antar elemen inline-block bisa menghasilkan celah kecil; bisa dihilangkan dengan komentar atau memakai flexbox.
- Untuk tata letak lebih andal dan bebas celah, flexbox sering jadi pilihan utama.
- inline-block tetap menghormati text-align dari induknya.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.