CSS inlineとのinline-block値の違いは何displayですか？

視覚的な答え

<span>内の要素を想像してみてください<div>。たとえば、<span>要素の高さを100pxにして赤い枠を付けると、次のようになります。

表示：インライン

表示：インラインブロック

表示ブロック

コード：http : //jsfiddle.net/Mta2b/

の要素はの要素とdisplay:inline-block似display:inlineていますが、幅と高さを持つことができます。つまり、インラインブロック要素をテキストまたは他の要素内でフローしながら、ブロックとして使用できます。

概要としてサポートされているスタイルの違い：

• インライン：のみmargin-left、margin-right、padding-left、padding-right
• インラインブロック：margin、padding、height、width

display: inline;文で使用する表示モードです。たとえば、段落があり、1つの単語を強調表示したい場合は、次のようにします。

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

<em>要素がありdisplay: inline;、このタグは、常に文で使用されているため、デフォルトで。<p>要素がありdisplay: block;、それが文や文の中で、それは文章のブロックがありますどちらのだから、デフォルトで。

要素には、a またはa またはverticalを含めるdisplay: inline; ことはできません。持つ要素ができてい、と。 あなたが追加したい場合には要素は、この要素を設定する必要があります。これで、要素とその他すべてのブロックスタイル（の一部）にa を追加できますが、それは文（の一部）に配置されます。heightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

答えで言及されていないことの1つは、インライン要素が行の間で壊れることがある一方で、インラインブロックはできない（そして明らかにブロックする）ということです！したがって、インライン要素はテキストとその中のブロックの文のスタイルを設定するのに役立ちますが、パディングできないため、代わりに行の高さを使用できます。

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

上記のすべての回答は、元の質問に関する重要な情報を提供します。ただし、間違っているように見える一般化があります。

幅と高さを少なくとも1つのインライン要素（私が考えることができる）、つまり要素に設定することが可能<img>です。

ここで受け入れられた回答とこの重複についての回答はどちらも不可能であると述べていますが、これは有効な一般規則のようには見えません。

例：

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

<img src="#" />

img持っていますdisplay: inlineが、そのwidthとは、height正常に設定されました。

splattneの答えは：私は同じことを繰り返すことはなくなりますので、おそらく、すべてのほとんどをカバーinlineし、inline-blockと異なる動作をdirectionCSSプロパティ。

次のスニペットone twoでは、LTRレイアウトと同様に、（順番に）レンダリングされます。ここのブラウザーは英語の部分をLTRテキストとして自動検出し、左から右にレンダリングしたのではないかと思います。

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

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

span {
  display: inline;
}

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

ただし、先に進んでに設定displayするinline-blockと、ブラウザはdirectionプロパティを尊重し、要素を右から左に順番にtwo oneレンダリングするように見えるため、レンダリングされます。

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

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

span {
  display: inline-block;
}

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

他に問題があるかどうかはわかりませんが、Chromeでこれを経験的に調べただけです。