Apa perbedaan antara tampilan: inline dan display: inline-block?

607

Apa sebenarnya perbedaan antara inlinedan inline-blocknilai-nilai CSS display?

Logesh Paul
sumber

Jawaban:

1351

Jawaban visual

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

display: inline-block

display: inline-block

tampilan: blok

masukkan deskripsi gambar di sini

Kode: http://jsfiddle.net/Mta2b/

Elemen dengan display:inline-blockseperti display:inlineelemen, 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:

  • inline : hanya margin-left, margin-right, padding-left,padding-right
  • inline-block : margin, padding, height,width
percikan
sumber
6
Intuisi hebat. Jadi satu-satunya perbedaan adalah bahwa atribut ketinggian elemen inline tidak dapat diatur?
user2316667
7
@ user2316667 dan lebar
Oscar Calderon
2
@ user2316667 dan @OscarCalderon: juga, elemen sebaris tidak peduli margin & bantalan vertikal dan elemen berikutnya akan ditempatkan pada baris yang sama (tidak ada jeda baris setelahnya). elemen blok seperti sebagai p, divdapatkan 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)
S.Serpooshan
1
padding-top dan padding-right juga mempengaruhi efek tampilan elemen inline, menyebabkan kekacauan.
tomwang1013
2
@ manuman94 Tidak, bukan itu artinya. Ada kasus penggunaan untuk semua jenis tampilan yang berbeda.
splattne
126

display: inline;adalah mode tampilan untuk digunakan dalam kalimat. Misalnya, jika Anda memiliki paragraf dan ingin menyoroti satu kata yang Anda lakukan:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

The <em>elemen memiliki display: inline;secara default, karena tag ini selalu digunakan dalam sebuah kalimat. The <p>elemen memiliki display: block;secara default, karena itu bukan sebuah kalimat atau dalam kalimat, itu blok kalimat.

Elemen dengan display: inline; tidak dapat memiliki a heightatau a widthatau vertikal margin. Elemen dengan display: block; dapat memiliki a width, heightdan margin.
Jika Anda ingin menambahkan heightke <em>elemen, Anda perlu mengatur elemen ini untuk display: inline-block;. Sekarang Anda dapat menambahkan heightelemen dan setiap gaya blok lainnya ( blockbagian dari inline-block), tetapi ditempatkan dalam kalimat ( inlinebagian dari inline-block).

Wouter J
sumber
11
Jawaban bagus! tl; dr - Jika Anda ingin mengubah ukuran elemen inline, Anda bisa menggunakan inline-block sebagai tipe tampilan.
errorprone
7
Koreksi kecil: elemen sebaris dapat memiliki margin horizontal (kanan, kiri), tetapi tidak margin vertikal (atas, bawah)
whyleee
1
Jawaban yang bagus karena Anda menyebutkan tentang apa yang bisa / tidak bisa kami lakukan ketika memilih salah satu displaynilai.
ha9u63ar
14

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.

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

masukkan deskripsi gambar di sini

Ali
sumber
6

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:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

The imgmemiliki display: inline, namun widthdan heightberhasil ditetapkan.

alexandros84
sumber
2
Sebenarnya, img-tag memiliki display-inline sebagai nilai tampilan default mereka. Jadi itu sebabnya dimungkinkan untuk mengatur lebar dan tinggi.
Alex
img adalah elemen inline -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... Jadi pada dasarnya Anda mengatakan kurang lebih sama persis dengan hal yang sama yang saya katakan dan Anda downvoting ??
alexandros84
7
Tidak, bukan aku. img-tag adalah "elemen yang diganti" yang pada dasarnya berarti konten diganti sehingga berperilaku seperti elemen inline-block. Dan ya properti default aktual (properti yang dihitung oleh browser inline). Tetapi satu-satunya alasan untuk itu adalah karena inline-blok tidak diperkenalkan sampai CSS2 dan di sana untuk itu adalah "elemen inline berperilaku seperti elemen inline-blok" karena digantikan oleh kontennya. yaitu Anda tidak mengatur tinggi / lebar ke elemen, Anda mengaturnya pada isinya - Aneh, ya. Aku tahu. drafts.csswg.org/css2/conform.html#replaced-element
Alex
Itu sebenarnya menarik apa yang Anda katakan. Beri saya waktu untuk meneliti dan mengedit kembali dan mungkin mengambil kembali downvote dan upvote sebagai gantinya ..! Pada akhirnya saya jujur ​​merasa bahwa diskusi ini berkontribusi pada kelengkapan seluruh debat.
alexandros84
1

Jawaban splattne mungkin mencakup sebagian besar segalanya jadi saya tidak akan mengulangi hal yang sama, tetapi: inlinedan inline-blockberperilaku berbeda dengan directionproperti 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.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Namun, jika saya melanjutkan dan mengatur displayke inline-block, browser muncul untuk menghormati directionproperti dan membuat elemen dari kanan ke kiri secara berurutan, sehingga two oneditampilkan.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}
<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Saya tidak tahu apakah ada keanehan lain dalam hal ini, saya hanya menemukan ini secara empiris di Chrome.

OverCoder
sumber