Qual é exatamente a diferença entre the inlinee inline-blockvalues ​​of CSS display?

Uma resposta visual

Imagine um <span>elemento dentro de a <div>. Se você der ao <span>elemento uma altura de 100px e uma borda vermelha, por exemplo, ele ficará assim com

display: embutido

display: bloco embutido

display: bloco

Código: http://jsfiddle.net/Mta2b/

Elementos com display:inline-blocksão como display:inlineelementos, mas eles podem ter uma largura e uma altura . Isso significa que você pode usar um elemento de bloco embutido como um bloco enquanto o flui dentro de texto ou outros elementos.

Diferença de estilos suportados como resumo:

• linha : somente margin-left, margin-right, padding-left,padding-right
• inline-block : margin, padding, height,width

display: inline;é um modo de exibição para usar em uma frase. Por exemplo, se você possui um parágrafo e deseja destacar uma única palavra, faça:

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

O <em>elemento tem um display: inline;por padrão, porque essa tag é sempre usada em uma frase. O <p>elemento tem um display: block;por padrão, porque não é nem uma frase nem em uma frase, é um bloco de frases.

Um elemento com display: inline; não pode ter um heightou um widthou um vertical margin. Um elemento com display: block; pode ter a width, heighte margin.
Se você deseja adicionar um heightao <em>elemento, defina esse elemento como display: inline-block;. Agora você pode adicionar um heightao elemento e a qualquer outro estilo de bloco (a blockparte de inline-block), mas ele é colocado em uma frase (a inlineparte de inline-block).

Uma coisa não mencionada nas respostas é que o elemento inline pode quebrar entre linhas, enquanto o bloco inline não pode (e obviamente bloqueia)! Portanto, os elementos embutidos podem ser úteis para estilizar frases de texto e blocos dentro deles, mas como eles não podem ser preenchidos, você pode usar a altura da linha .

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

Todas as respostas acima contribuem com informações importantes sobre a pergunta original. No entanto, há uma generalização que parece errada.

É possível definir largura e altura para pelo menos um elemento embutido (que eu possa pensar) - o <img>elemento.

As duas respostas aceitas aqui e neste duplicado afirmam que isso não é possível, mas isso não parece uma regra geral válida.

Exemplo:

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

<img src="#" />

O imgtem display: inline, mas é widthe heightfoi definido com sucesso.

A resposta de splattne provavelmente cobriu quase tudo, para não repetir a mesma coisa, mas: inlinee inline-blockse comportar de maneira diferente com a directionpropriedade CSS.

No próximo trecho que você vê one two(em ordem) é renderizado, como nos layouts LTR. Eu suspeito que o navegador aqui detectou automaticamente a parte em inglês como texto LTR e a processou da esquerda para a direita.

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

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

span {
  display: inline;
}

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

No entanto, se eu for em frente e defina displaycomo inline-block, o navegador parece respeitar a directionpropriedade e renderizar os elementos da direita para a esquerda, para que two oneseja renderizado.

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

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

span {
  display: inline-block;
}

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

Eu não sei se existem outras peculiaridades para isso, eu só descobri isso empiricamente no Chrome.