親要素とその子の高さが同じであるにもかかわらず、親要素に垂直スクロールバーが表示されるのはなぜですか?

子と親の高さが等しいにもかかわらず垂直スクロールバーをアドレス指定する

HTML で、CSS を使用して親と子が異なるネストされた要素のスタイルを設定する場合高さが等しい場合、親要素で垂直スクロールバーが表示される可能性があります。スクロールバーは必要ないように見えるため、混乱を招く可能性があります。

原因: ベースラインの垂直方向の位置合わせ

この問題の根本はデフォルトにあります。インラインブロック（例えば、display: inline-block を含む div）を含む、インラインレベル要素の CSS プロパティ：vertical-align:baseline。タイポグラフィでは、「j」や「g」などの文字がベースラインよりも下に伸びます。このベースラインの間隔により、親要素内に追加の高さが作成されます。

問題の解決

予期しない垂直スクロールバーを削除するには、次を使用して子要素の垂直方向の配置を調整できます。垂直整列プロパティ。デフォルトのベースラインではなく、上、下、または中央に設定すると、余分なスペースが削除され、スクロールバーが表示されなくなります:

.sideBar, .contentHolder {
  vertical-align: top; // or 'bottom', 'middle'
}

代替

垂直方向の位置合わせの調整に加えて、この問題を解決するには他のオプションもあります:

• 代わりに display: block を使用します。表示の: 子要素の inline-block。
• 親要素に line-height: 0 を設定します。
• 親要素に font-size: 0 を設定します (これは上書きできます)必要に応じて子要素)。

以上が親要素とその子の高さが同じであるにもかかわらず、親要素に垂直スクロールバーが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。