Apa perbedaan antara block dan inline-block?
Saat bekerja dengan HTML dan CSS, blokir, blok sebaris, dan sebaris mungkin membingungkan. Di bawah ini adalah contoh dari setiap atribut untuk memberikan pemahaman yang lebih baik tentang cara kerjanya masing-masing.
Tampilan CSS: inline
Dalam contoh pertama kita, kita mulai dengan menggunakan tag , yang secara default merupakan elemen inline. Pada contoh di bawah, teks berwarna merah seperti yang ditentukan oleh atribut gaya di tag . Cara ini merupakan salah satu cara membuat beberapa kata atau kalimat menjadi merah menggunakan CSS.
Kode HTML:
span text
Tampilan CSS: blok
Pada contoh berikutnya, kami telah mengubah default dari tag untuk ditampilkan sebagai blok. Karena elemen blok menempati barisnya sendiri, ia memberikan kesan bahwa enter atau return ditekan setelah “bagaimana” dan “teks” dalam contoh kita.
Contoh teks memberi contoh cara membuatnya span text elemen sebaris, blok, atau blok sebaris dan bagaimana hal itu mengubah tampilan teks.
Kode HTML:
span text
Tampilan CSS: blok-sebaris
Terakhir, pada contoh berikutnya, kami telah mengubah default dari tag untuk ditampilkan sebagai blok-sebaris. Tidak seperti elemen blok, blok sebaris tetap sejajar dengan semua teks di sekitar elemen dan muncul sama seperti sebaris.
Contoh teks memberi contoh cara membuatnya span text elemen sebaris, blok, atau blok sebaris dan bagaimana hal itu mengubah tampilan teks.
Kode HTML:
span text
Mengapa saya menggunakan blok-sebaris dan bukan sebaris?
Setelah melihat contoh di atas, Anda mungkin langsung bertanya pada diri sendiri mengapa saya ingin menggunakan elemen blok atau blok sebaris? Dengan membuat elemen menjadi elemen blok, Anda mendapatkan kemampuan untuk memiliki ketinggian vertikal ke elemen tersebut seperti yang ditunjukkan di bawah ini.
Rentang sejajar dengan tinggi
Contoh teks memberi contoh cara membuatnya span text elemen sebaris, blok, atau blok sebaris dan bagaimana hal itu mengubah tampilan teks.
Kode HTML:
span text
Rentang blok sebaris dengan tinggi
Contoh teks memberi contoh cara membuatnya span text elemen sebaris, blok, atau blok sebaris dan bagaimana hal itu mengubah tampilan teks.
Kode HTML:
span text