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

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-block

tampilan: blok

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

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).

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>

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.

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.