高さが一致しているにもかかわらず、インライン ブロック要素によって垂直スクロールバーが作成されるのはなぜですか?

親と子の高さが同じ場合に垂直スクロール バーが表示されるのはなぜですか?

問題:

を使用する場合親コンテナ (.displayContainer) 内のインラインブロック要素 (.sideBar および .contentHolder)、不要な垂直親要素と子要素の計算された高さが同じであるにもかかわらず、スクロール バーが表示されます。

原因:

インライン ブロック要素のデフォルトの垂直方向の配置プロパティは「baseline」です。 」、ディセンダー (ベースラインの下に広がる小文字) 用のスペースを予約します。この追加のスペースによりコンテナがオーバーフローし、スクロール バーの表示がトリガーされます。

解決策:

垂直スクロール バーを削除するには、vertical-align プロパティを調整します。子要素を変更するか、次のいずれかの変更を加えます:

• 垂直配置を設定する別の値に変更します:

  • vertical-align: top
  • vertical-align:bottom
  • vertical-align: middle

• 表示を切り替えます: block:

  • .sideBar {表示: ブロック; }
  • .contentHolder {表示: ブロック; }

• 親に line-height: 0 を設定します:

  • .displayContainer { line-height: 0; }

• 親で font-size: 0 を設定し、子でそれを復元します (必要な場合):

  • .displayContainer { フォントサイズ: 0; }
  • .sideBar { font-size: 16px; }
  • .contentHolder { font-size: 16px; }

以上が高さが一致しているにもかかわらず、インライン ブロック要素によって垂直スクロールバーが作成されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。