web-dev-qa-db-ja.com

Display：inlineとdisplay：inline-blockの違いは何ですか？

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

cssdisplay
557
Logesh Paul

視覚的な答え

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

表示：インライン

display: inline

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

display: inline-block

表示：ブロック

enter image description here

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

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

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

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

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

<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;cannotを持つ要素は、height、width、または垂直marginを持ちます。 display: block;canを持つ要素はwidth、heightおよびmarginを持ちます。
heightを<em>要素に追加したい場合は、この要素をdisplay: inline-block;に設定する必要があります。これで、要素と他のすべてのブロックスタイル（inline-blockのheight部分）にblockを追加できますが、それは文（inline-blockのinline部分）に置かれます。

125
Wouter J

回答で言及されていないことの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>

enter image description here

10
Ali

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

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

両方ともここで受け入れられた答え/ この重複 /これは不可能であるが、これは有効な一般的な規則のようには思えないと述べる。

例：

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
<img src="#" />

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

4
alexandros84

一般的に私達は他の要素がそれらの左右に座ることを可能にするためにこれらの両方の特性を使用しますが、それは以下に説明されるいくつかの違いを持ちます。

表示：インライン

インライン要素は、隣接する要素の前後に改行がなく、その横にHTMLを使用できます。

  1. すべての面をパディング可能
  2. 上と下ではなく、左右の余白を許可します
  3. その要素の幅と高さを設定することはできません
  4. 左右に座って他の要素を尊重する

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

インラインブロック要素は、インライン要素として（隣接するコンテンツと同じ行に）配置されます。これはインライン要素のように見えますが、実際にはブロック要素として機能し、改行を強制するものではありません。

  1. パディングとマージンのすべての面を許可
  2. その要素の幅と高さを設定できます
  3. 左右に座って他の要素を尊重する
0
Saniya syed qureshi