Cara Menggunakan CSS Inline Keyword
Inline keyword adalah keyword CSS yang digunakan untuk mengatur bagaimana sebuah elemen ditampilkan dalam aliran konten normal. Inline keyword biasanya digunakan untuk mengontrol jarak dan alignment dari elemen, dan umumnya digunakan bersama dengan display property.
Berikut adalah beberapa inline keyword dan contoh penggunaannya:
1. inline
Keyword inline adalah default value untuk sebagian besar elemen HTML. Elemen dengan display: inline; akan ditampilkan dalam aliran konten normal, satu di samping yang lain.
Contoh:
Ini adalah paragraf pertama. Ini adalah span dengan display inline. Ini adalah paragraf kedua.
Dalam contoh ini, span akan ditampilkan dalam baris yang sama dengan teks paragraf, dan lebar span akan menyesuaikan dengan lebar kontennya.
2. inline-block
Keyword inline-block memungkinkan elemen untuk memiliki lebar dan tinggi, seperti elemen block, tetapi tetap ditampilkan dalam aliran konten normal seperti elemen inline.
Contoh:
Dalam contoh ini, div akan memiliki lebar 100px dan tinggi 50px, tetapi akan ditampilkan dalam baris yang sama dengan teks yang ada di sekitarnya.
3. inline-flex
Keyword inline-flex memungkinkan elemen untuk menggunakan properti flexbox, tetapi tetap ditampilkan dalam aliran konten normal seperti elemen inline.
Contoh:
Item 1
Item 2
Dalam contoh ini, div akan memiliki lebar 100px dan tinggi 50px, tetapi akan ditampilkan dalam baris yang sama dengan teks yang ada di sekitarnya. Isi div akan diatur dengan menggunakan properti flexbox.
4. inline-table
Keyword inline-table memungkinkan elemen untuk menggunakan properti table, tetapi tetap ditampilkan dalam aliran konten normal seperti elemen inline.
Contoh:
Cell 1
Cell 2
Dalam contoh ini, table akan ditampilkan dalam baris yang sama dengan teks yang ada di sekitarnya.
Penggunaan Inline Keyword
Inline keyword sangat berguna dalam berbagai situasi, seperti:
- Menyisipkan gambar atau elemen lainnya ke dalam teks:
- Membuat elemen yang dapat diklik dalam teks:
- Membuat layout sederhana dengan flexbox:
- Menyisipkan tabel kecil ke dalam teks:
Kesimpulan
Inline keyword adalah tools yang kuat untuk mengatur tampilan elemen dalam aliran konten normal. Dengan memahami dan menggunakan keyword ini dengan benar, Anda dapat membuat layout yang lebih fleksibel dan dinamis.
