css - display: inline と display: inline-block の違いは何ですか?

Question

CSSのinlineとの値の違いは何ですか?inline-blockdisplay

Answer 1

視覚的な答え

<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

Answer 2

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;は、文でも文でもなく、文のブロックであるためです。

を持つ要素には、または垂直を含めるdisplay: inline; ことはできません。を持つ要素は、、およびを持つことができます。 要素にを追加する場合は、この要素を に設定する必要があります。これで、要素と他のすべてのブロック スタイル ( の部分) にを追加できますが、それは文の中に配置されます ( の部分)。heightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

Answer 3

回答で言及されていないことの 1 つは、インライン要素は行間で分割できますが、インライン ブロックはできない (そして明らかにブロックする) ことです。そのため、インライン要素は、テキストの文とその中のブロックのスタイルを設定するのに役立ちますが、パディングできないため、代わりにline-heightを使用できます。

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

Answer 4

上記のすべての回答は、元の質問に関する重要な情報に貢献しています。ただし、間違っていると思われる一般化があります。

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

どちらもここで回答を受け入れ、この重複した状態ではこれは不可能ですが、これは有効な一般規則のようには見えません。

例：

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

<img src="#" />

imgにはがありますdisplay: inlineが、widthとheightは正常に設定されました。