Apakah level blok elemen <img> atau level sebaris?

163

Saya pernah membaca di suatu tempat bahwa <img>elemen berperilaku seperti keduanya. Jika benar, dapatkah seseorang menjelaskan dengan contoh?

html css image kekurangan
sumber

Jawaban:

189

Memang benar, keduanya - atau lebih tepatnya, mereka adalah elemen "inline block". Ini berarti bahwa mereka mengalir inline seperti teks, tetapi juga memiliki lebar dan tinggi seperti elemen blok.

Di CSS, Anda dapat mengatur elemen display: inline-blockuntuk membuatnya mereplikasi perilaku gambar *.

Gambar dan objek juga dikenal sebagai elemen "diganti", karena mereka tidak memiliki konten sendiri, elemen tersebut pada dasarnya digantikan oleh data biner.

* Perhatikan bahwa browser secara teknis menggunakan display: inline(seperti yang terlihat pada alat pengembang) tetapi mereka memberikan perlakuan khusus untuk gambar. Mereka masih mengikuti semua sifat inline-block.

DisgruntledGoat
sumber
Saya selalu membaca bahwa gambar adalah elemen inline, bukan inline-block, tetapi masuk akal bahwa mereka akan inline-block, karena kemampuan untuk menambah lebar dan tinggi.
Donato
22
Jawaban ini secara teknis tidak benar. Tepatnya, imgunsur-unsur bukan inline-blocktetapi sebenarnya inlineunsur. Anda dapat memeriksanya di peramban modern dengan mengklik kanan gambar, mengeklik "Periksa elemen", lalu melihat gaya yang dihitung, yang akan ditampilkan display: inline. Tidak ada konteks blok yang terjadi di dalam tag, jadi tidak benar untuk menyebutnya inline-block. Untuk informasi lebih lanjut tentang elemen inline yang diganti lihat jawaban Quentin dan artikel MDN ini .
Maximillian Laumeister
@ Max link yang mengatakan apa-apa tentang elemen yang diganti menjadi inline.
DisgruntledGoat
@DisgruntledGoat Tautan yang saya poskan tidak mengatakan bahwa imgunsur-unsur sebaris - perangkat Google Chrome dev menunjukkan imgunsur-unsur sebagai sebaris. Posting ini adalah satu-satunya tempat yang saya temukan sejauh ini yang mengatakan bahwa mereka inline-blocksebaliknya. Menariknya, saya belum menemukan otoritas yang mengatakan mereka inlinejuga. Apakah cara memperlakukan tag bergantung pada implementasi, mungkin?
Maximillian Laumeister
2
@ Max Menurut ini , elemen yang diganti berada di luar lingkup model pemformatan CSS. Tidak ada dalam spesifikasi HTML atau CSS yang menyatakan bahwa gambar sejajar. Jadi terlepas dari apa yang dikatakan browser, gambar diperlakukan persis seperti yang diatur display:inline-block.
DisgruntledGoat
53

Suatu imgelemen adalah elemen inline yang diganti .

Berperilaku seperti elemen inline (karena itu), tetapi beberapa generalisasi tentang elemen inline tidak berlaku untuk imgelemen.

misalnya

Generalisasi: "Lebar tidak berlaku untuk elemen sebaris"

Apa yang dikatakan oleh spec : "Berlaku untuk: semua elemen kecuali elemen inline, baris tabel, dan grup baris yang tidak diganti"

Karena gambar adalah elemen inline yang diganti, itu berlaku.

Quentin
sumber
13

Elemen IMG sebaris, artinya kecuali mereka melayang mereka akan mengalir secara horizontal dengan teks dan elemen sebaris lainnya.

Mereka adalah "blok" elemen yang memiliki lebar dan tinggi. Tetapi mereka berperilaku lebih seperti "inline-block" dalam hal itu.

Robusto
sumber
7

Untuk hampir semua tujuan menganggapnya sebagai elemen inline dengan set lebar. Pada dasarnya Anda bebas menentukan bagaimana Anda ingin gambar ditampilkan menggunakan CSS. Saya biasanya menetapkan beberapa kelas gambar seperti ini:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}
Montana Flynn
sumber
2

Setiap kali Anda menyisipkan gambar, ia hanya membutuhkan lebar seperti aslinya. Anda dapat menambahkan elemen html lain di sebelahnya dan Anda akan melihat bahwa itu akan mengizinkannya. Itu menjadikan gambar elemen "inline".

Avatar
sumber
0

Memang benar, keduanya - atau lebih tepatnya, mereka adalah elemen "inline block". Ini berarti bahwa mereka mengalir inline seperti teks, tetapi juga memiliki lebar dan tinggi seperti elemen blok.

Modaser Sadat
sumber