CSS - Perbedaan Display Inline - Inline Block & Block
CSS properti display sering kita gunakan saat membuat design web, karena itu kita harus paham betul megenai penggunan properti display, dipostingan ini saya akan menjelaskan perbedaan display:inline, display:inline-block dan display:block.
Eelemen setelah element yang diberi display:block akan berada di bawahnya atau membuat baris baru.
Properti height dan weight berpengaruh.
Untuk lebih jelasnya di bawah ini saya sertakan sourcode dan tampilan dari masing - masing properti display.
Dari gambar di atas, untuk display:inline, meski kita memberi nilai untuk tinggi dan lebarnya, itu tidak akan berpengaruh.
Semoga penjelasan di atas bisa dipahami oleh teman-teman, jika ada pertanyaan silahkan tinggalkan komen, happy coding!
1. display:inline
Menampilkan elemen sebagai elemen sebaris, dan ketika kita memberinya properti tinggi dan lebar, maka properti tersebut tidak akan berpengaruh.2. display:block
Menampilkan elemen sebagai elemen blok, dan elemen yang di beri properti display:block akan menjadi baris baru dan mengambil semua lebarnya.Eelemen setelah element yang diberi display:block akan berada di bawahnya atau membuat baris baru.
Properti height dan weight berpengaruh.
3. display:inline-block
Menampilkan element sebagai wadah blok tapi elemen ini diformat sebagai elemen sebaris. Nilai tinggi dan lebar bisa di atur dengan menggunakan properti height dan width.Untuk lebih jelasnya di bawah ini saya sertakan sourcode dan tampilan dari masing - masing properti display.
 |
| display:inline - display:inline-block - display : block |
Dari gambar di atas, untuk display:inline, meski kita memberi nilai untuk tinggi dan lebarnya, itu tidak akan berpengaruh.
Semoga penjelasan di atas bisa dipahami oleh teman-teman, jika ada pertanyaan silahkan tinggalkan komen, happy coding!
Post a Comment for "CSS - Perbedaan Display Inline - Inline Block & Block"