Apa sebenarnya perbedaan antara inline
dan inline-block
nilai-nilai CSS display
?
607
Bayangkan sebuah <span>
elemen di dalam a <div>
. Jika Anda memberi <span>
elemen ketinggian 100px dan batas merah misalnya, akan terlihat seperti ini dengan
display: inline
display: inline-block
tampilan: blok
Kode: http://jsfiddle.net/Mta2b/
Elemen dengan display:inline-block
seperti display:inline
elemen, tetapi mereka dapat memiliki lebar dan tinggi . Itu berarti bahwa Anda dapat menggunakan elemen blok-inline sebagai blok saat mengalir dalam teks atau elemen lainnya.
Perbedaan gaya yang didukung sebagai ringkasan:
margin-left
, margin-right
, padding-left
,padding-right
margin
, padding
, height
,width
p
,div
dapatkan garis lebar keseluruhan (force a line break) tetapi hormati lebar / tinggi dan semua bantalan / margin horisontal / vertikal. Elemen blok-inline memiliki perilaku yang sama dengan blok tetapi tanpa seluruh baris (elemen lain dapat ditempatkan di sampingnya)display: inline;
adalah mode tampilan untuk digunakan dalam kalimat. Misalnya, jika Anda memiliki paragraf dan ingin menyoroti satu kata yang Anda lakukan:The
<em>
elemen memilikidisplay: inline;
secara default, karena tag ini selalu digunakan dalam sebuah kalimat. The<p>
elemen memilikidisplay: block;
secara default, karena itu bukan sebuah kalimat atau dalam kalimat, itu blok kalimat.Elemen dengan
display: inline;
tidak dapat memiliki aheight
atau awidth
atau vertikalmargin
. Elemen dengandisplay: block;
dapat memiliki awidth
,height
danmargin
.Jika Anda ingin menambahkan
height
ke<em>
elemen, Anda perlu mengatur elemen ini untukdisplay: inline-block;
. Sekarang Anda dapat menambahkanheight
elemen dan setiap gaya blok lainnya (block
bagian dariinline-block
), tetapi ditempatkan dalam kalimat (inline
bagian dariinline-block
).sumber
display
nilai.Satu hal yang tidak disebutkan dalam jawaban adalah elemen inline dapat memecah antar baris sedangkan inline-block tidak dapat (dan jelas memblokir)! Jadi elemen sebaris dapat berguna untuk gaya kalimat teks dan blok di dalamnya, tetapi karena mereka tidak dapat diisi, Anda dapat menggunakan ketinggian garis sebagai gantinya.
sumber
Semua jawaban di atas berkontribusi info penting pada pertanyaan asli. Namun, ada generalisasi yang tampaknya salah.
Dimungkinkan untuk mengatur lebar dan tinggi ke setidaknya satu elemen sebaris (yang dapat saya pikirkan) -
<img>
elemen.Keduanya menerima jawaban di sini dan pada duplikat ini menyatakan bahwa ini tidak mungkin tetapi ini sepertinya bukan aturan umum yang valid.
Contoh:
The
img
memilikidisplay: inline
, namunwidth
danheight
berhasil ditetapkan.sumber
Jawaban splattne mungkin mencakup sebagian besar segalanya jadi saya tidak akan mengulangi hal yang sama, tetapi:
inline
daninline-block
berperilaku berbeda dengandirection
properti CSS.Di dalam potongan berikutnya Anda melihat
one two
(dalam urutan) yang diberikan, seperti di tata letak LTR. Saya menduga browser di sini mendeteksi secara otomatis bagian bahasa Inggris sebagai teks LTR dan mengubahnya dari kiri ke kanan.Namun, jika saya melanjutkan dan mengatur
display
keinline-block
, browser muncul untuk menghormatidirection
properti dan membuat elemen dari kanan ke kiri secara berurutan, sehinggatwo one
ditampilkan.Saya tidak tahu apakah ada keanehan lain dalam hal ini, saya hanya menemukan ini secara empiris di Chrome.
sumber