web-dev-qa-db-ja.com

オーバーフロー：インラインブロックで非表示にすると、親に高さが追加されます

これは以前に何らかの形で尋ねられたことは確かですが、答えを見つけることができません。

ネストされたdivがいくつかあります

<div class="parent">
    <div class="child">A</div>
</div>

そして子はdisplay：inline-blockとoverflow：hiddenを持っています

.parent{
    background-color:red;
}
.child{ 
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
}

そしてそれはこのようにレンダリングされます： enter image description here

親が子より5px高いことがわかります。

余分な高さはどこから来るのですか？

次にサンプルを示します。 http://jsfiddle.net/w8dfU/

編集：display：inline-blockまたはoverflow：hiddenを削除したくありません。これは問題を説明するための簡単な例ですが、実際のレイアウト私は両方が必要です。この余分な高さが表示される理由を理解したいだけです。それはこのようになるべきどこかで指定されていますか？他のCSS機能の結果ですか？

htmlheightoverflowcss
38
stralsi

水平スライダーを作成するときにこの問題が発生しました。インラインブロック要素のvertical-align：topで修正しました。

ul {
    overflow-x: scroll;
    overflow-y:hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

ul&::-webkit-scrollbar {
    display: none;
}

li {
    display: inline-block;
    vertical-align: top;
    width: 75px;
    padding-right: 20px;
    margin:20px 0 0 0;
}
62
user3257701

上記の受け入れられた answer は正しいですが、それは私が探していた説明を与えていません。 @Alohciが comment で適切な説明を提供しています。

説明：

  • vertical-alignの値はbaselineであるため、子divはテキストのベースラインに揃えられます。

  • このテキストのベースラインは、一番下の行と同じではありません。ディセンダー付きの文字に対応するために、少し上になっています：p、q、g。

  • これが、vertical-align：topを設定することで問題が修正される理由です。

11
stralsi
.child{
    background-color:green; 
    display:inline-block;
    overflow:hidden; 
    vertical-align: top;
}
1
Ying Yi

この余分なスペースは、Childクラスのoverflow:hiddenからのものです。このプロパティを削除して確認し、overflow:hiddenプロパティを本当に使用したい場合は、子クラスに負のマージンを使用してください。この余分なスペースを削除できます。

0
Nandu Hulsure