質問

とは具体的にどのような違いがあるのでしょうか。 inline と inline-block CSSの値 display ?

解決方法は？

ビジュアルアンサー

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

表示: インライン

display: inline-block

表示：ブロック

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

を持つ要素 display:inline-block は、まるで display:inline 要素ですが、これらの要素には 幅 と 高さ . つまり、inline-block要素をテキストや他の要素の中に流しながら、ブロックとして使うことができるのです。

対応スタイルの違いについてまとめました。

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