2613


下記のようなHTML/CSSの場合に、クラス`wrapper`とクラス`inline`・`overflow`の高さが異なってしまうのはどうしてでしょうか？

HTML:

[code]

    <div class='wrapper'>
        <div class="inline">
            <div class="overflow">あいうえお</div>
        </div>
    </div>
    
[/code]

CSS:

[code]

    .wrapper { border: 1px solid red; }
    
    .inline {
        border: 1px solid green;
        display: inline-block;
    }
    
    .overflow {
        border: 1px solid blue;
        overflow: hidden;
    }
    
[/code]

[**JSFiddle**](http://jsfiddle.net/uwy4djwj/)


CC BY-SA 3.0
2014-12-26T01:14:04.663
2603
2019-09-11T17:49:46.880
2019-09-11T17:49:46.880
32986
4191
question
css
overflow: hiddenが指定された要素を持つinline-blockの高さが親の高さと違う理由


[本家stackoverflow](https://stackoverflow.com/questions/20310690/overflowhidden-
on-inline-block-adds-height-to-parent) に同様の質問がありました。

これによると、原因としては、`overflow:hidden` の指定によってインラインブロックがベースラインに動かされるため、のようです。

そのため、この問題を回避したい場合は、インラインブロックの要素に `vertical-align: top;` を指定すれば高さもそろいます。


CC BY-SA 3.0
2014-12-26T01:56:26.167
2608
2014-12-26T01:56:26.167
2017-05-23T12:38:55.307
-1
2944
2603
answer


質問のものは、 [vertical-align を調整することで](http://jsfiddle.net/higon/96b8zgsr/)
挙動を調整できます。

理由ですが、これはデフォルトの `vertical-align: baseline`
の設定が作用しているためで、「通常であれば、文字の垂直位置」が対象になるところ、 `overflow:hidden`
が指定されたことによって、「要素ボックスの垂直位置」が対象になったためです。

[CSS 2.1 仕様の 10.8.1](http://www.w3.org/TR/CSS2/visudet.html#strut)
の最後で以下のように規定された動きからきています。

> The baseline of an 'inline-block' is the baseline of its last line box  
>  in the normal flow, unless it has either no in-flow line boxes or if  
>  its 'overflow' property has a computed value other than 'visible', in  
>  which case the baseline is the bottom margin edge.

参考: Stackoverflow, [CSS inline-block causing extra space between 2 vertical
divs](https://stackoverflow.com/questions/17529077/css-inline-block-causing-
extra-space-between-2-vertical-divs)

以下、サンプルを挙げます。

[code]

    span,
    div {
      border: 1px solid red;
    }
[/code]

[code]

    <h3>問題の構造</h3>
    
    <div>■■<span style="display: inline-block"><div style="overflow: hidden;">□□</div></span>■■</div>
    
    <h3>問題の構造 (さらに単純化)</h3>
    
    <div>■■<span style="overflow: hidden; display: inline-block;">□□</span>■■
    </div>
    
    <h3>変更: hidden 無し</h3>
    
    <div>■■<span style="display: inline-block"><div>□□</div></span>■■</div>
    
    <h3>変更: vertical-align: top</h3>
    
    <div>■■<span style="display: inline-block; vertical-align: top;"><div style="overflow: hidden; ">□□</div></span>■■</div>
    
    <h3>変更: vertical-align: bottom</h3>
    
    <div>■■<span style="display: inline-block; ; vertical-align: bottom;"><div style="overflow: hidden">□□</div></span>■■</div>
[/code]

以上の例は [jsFiddle](http://jsfiddle.net/higon/re00op7d/) にも置きました。


CC BY-SA 3.0
2014-12-26T03:10:42.387
2613
2014-12-26T03:10:42.387
2017-05-23T12:38:56.467
-1
4978
2603
answer