Qual è esattamente la differenza tra i valori inlinee inline-blockdei CSS display?

Una risposta visiva

Immagina un <span>elemento dentro a <div>. Se dai <span>all'elemento un'altezza di 100 px e un bordo rosso, ad esempio, sembrerà così con

display: in linea

display: blocco in linea

blocco di visualizzazione

Codice: http://jsfiddle.net/Mta2b/

Gli elementi con display:inline-blocksono come display:inlineelementi, ma possono avere una larghezza e un'altezza . Ciò significa che puoi usare un elemento di blocco inline come blocco mentre lo fai scorrere all'interno di testo o altri elementi.

Differenza di stili supportati come riepilogo:

• Inline : solo margin-left, margin-right, padding-left,padding-right
• inline-block : margin, padding, height,width

display: inline;è una modalità di visualizzazione da utilizzare in una frase. Ad esempio, se hai un paragrafo e vuoi evidenziare una sola parola, fai:

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

L' <em>elemento ha un display: inline;valore predefinito, poiché questo tag viene sempre utilizzato in una frase. L' <p>elemento ha un display: block;valore predefinito, poiché non è né una frase né una frase, è un blocco di frasi.

Un elemento con display: inline; non può avere a heighto a widtho una verticale margin. Un elemento con display: block; può avere un width, heighte margin.
Se si desidera aggiungere heighta <em>all'elemento, è necessario impostare questo elemento su display: inline-block;. Ora puoi aggiungere heighta all'elemento e ogni altro stile di blocco (la blockparte di inline-block), ma è inserito in una frase (la inlineparte di inline-block).

Una cosa non menzionata nelle risposte è che l'elemento inline può spezzarsi tra le righe mentre il blocco inline non può (e ovviamente bloccare)! Quindi gli elementi in linea possono essere utili per modellare frasi di testo e blocchi al loro interno, ma poiché non possono essere riempiti puoi usare l' altezza della linea .

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

Tutte le risposte sopra forniscono importanti informazioni sulla domanda originale. Tuttavia, c'è una generalizzazione che sembra sbagliata.

È possibile impostare la larghezza e l'altezza su almeno un elemento inline (che mi viene in mente) - l' <img>elemento.

Entrambe le risposte accettate qui e su questo duplicato affermano che ciò non è possibile ma che non sembra una regola generale valida.

Esempio:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

L' imgha display: inline, ma la sua widthe heightsono stati fissati con successo.

La risposta di splattne probabilmente copriva quasi tutto, quindi non ripeterò la stessa cosa, ma: inlinee mi inline-blockcomporterò diversamente con la directionproprietà CSS.

All'interno del frammento successivo viene visualizzato one two(in ordine) il rendering, come nei layout LTR. Sospetto che il browser qui abbia rilevato automaticamente la parte inglese come testo LTR e l'ha resa da sinistra a destra.

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

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

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Tuttavia, se vado avanti e impostato displaysu inline-block, il browser sembra rispettare la directionproprietà e rendere gli elementi da destra a sinistra in ordine, in modo che two onesia reso.

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

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

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Non so se ci sono altre stranezze in questo, l'ho scoperto empiricamente solo su Chrome.