あなたの言ったことはほぼ正しいです。これは主に、どちらもブロック コンテナーであるという共通点があるためです。
ただし、落とし穴があります。
ブロック ボックスはブロック フォーマッティング コンテキストに参加し、インライン ブロックはインライン フォーマッティング コンテキストに参加します (ただし、ブロック ボックスが特定の条件下で行うように、ブロック フォーマッティング コンテキストをその子孫に対して確立します)。セクション 9.4を参照してください。基本的に、これはインライン ブロックがテキストであるかのように扱われることを意味します。これは、通常テキストに適用されるほとんどのプロパティがインライン ブロックにも適用されることを意味します。これらのプロパティにはtext-indent、text-align、vertical-align、 などが含まれます。
これは望ましくない副作用を引き起こす可能性があり、そもそも使用display: inline-blockしないことで簡単に防ぐことができます. 何が起こるかの興味深い例については、この質問を参照してください。
インライン ブロックのボックス モデルも、ブロック ボックスのモデルとは多少異なります。セクション 10にはすべての核心的な詳細が含まれていますが、主な違いは次のとおりです。
ご想像のとおり、width: 100%宣言がないと、インライン ブロックはその内容に合わせて縮小されます。
インライン ブロックはインラインでフローするため、自動左右マージンで中央揃えすることはできません。代わりに使用text-align: centerします。言うまでもなく、同じ行でそれを囲むテキストがない独自の行にする必要がありますが、設定している場合width: 100%、これは問題になりません。
インライン ブロックは、 margin collapseの影響を受けません。
ブロックベースのレイアウトを作成しようとしている場合は、display: block. 一般的に言えば、この 2 つのどちらかを決定するときは、常にデフォルトで を選択し、非常に正当な理由がある場合display: blockにのみ選択display: inline-blockする必要があります (いいえ、マージンの崩壊をブロックすることは、私が正当な理由と見なすものではありません)。
@BoltClockが言ったことすべてをエコーします。彼は多くの良い点を挙げています。
これに加えて、 aninline-blockはテキストとして扱われるため、周囲の空白もテキストとして扱われるため、block要素の場合とは異なる方法で機能します。これは、レイアウトに使用しようとすると、頻繁に人々を捕まえinline-blockます。これはおそらく を使用する上での最大の「落とし穴」ですinline-block。
別のもう少し微妙な点が、特にあなたの場合、つまり設定時に適用されますwidth:100%。この場合、使用しているボックス モデルに注意する必要があります。標準のボックス モデルでは、境界線、パディング、およびマージンが要素の幅の外側に配置されるためです。したがって、ボーダー、パディング、またはマージンを使用すると、要素は実際には 100% 幅よりも少し多くのスペースを占有します。
blockこの点は要素と要素に等しく適用されますが、幅を埋めるためにデフォルトで展開され、ボックスモデルがそれを超えないようにするため、通常は設定する必要がないという違いがあるため、inline-blockで発生する可能性が高くなります。はしっこ。inline-blockblockwidth:100%
これを回避するには、 を使用してボックス モデルを切り替えてbox-sizing:border-box、境界線などがボックス内に配置されるようにするwith:100%ことができます。詳細については、MDN ボックスサイズのページを参照してください。