インライン ブロック要素が並べて表示されないのはなぜですか?

インライン ブロック要素が 1 行に並べて適合しない

指定された HTML コードでは、2 つのインラインを表示することを目的としています。ブロック要素 #left と #right が 1 行に並んでおり、各要素は幅の 50% を占めます。ただし、要素を水平方向に整列させる代わりに、要素間に空白のギャップが表示されます。

インライン ブロック要素について

インライン ブロック要素として、#left と #rightインライン要素とブロック要素の両方のように動作します。これらはインライン要素と同じ行に存在しますが、ブロック要素と同じように幅と高さを設定できます。

Inline-Block Whisperspace

inline-block を使用する場合、パディングと行の分離のために追加された目に見えない最大 4 ピクセル幅のスペースである「ウィスパースペース」により、隣接する要素の間に空白のギャップが本質的に存在します。したがって、ウィスパースペースを含む 2 つの div の合計幅は 100% を超え、水平レイアウトが壊れます。

考えられる解決策

1.要素の幅の調整:

解決策の 1 つは、1 つの div の幅を 49% に減らして、ウィスパースペースを補うことです。ただし、これにより要素間に目に見える隙間が残る場合があります。

2.浮動要素:

もう 1 つのオプションは、両方の div を浮動状態にすることです。これにより、新しい行に配置することで Whisperspace の問題が解決されます。このアプローチは効果的に機能しますが、ページのフローが損なわれる可能性があります。

更新された推奨事項:

最新のブラウザーとの互換性を確保するには、代わりにフレックスボックスまたは CSS グリッド レイアウトを使用することをお勧めします。このようなレイアウトには inline-block を使用します。これらのテクニックにより、間隔をより細かく制御でき、応答性の高い適応性のあるデザインが可能になります。

以上がインライン ブロック要素が並べて表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。