CSS mystery white space above and below container when overflow: hidden is used on an inline-block

Question

When I use overflow: hidden, top and bottom margins appear around these containers. I really don't understand why this should be. I'm looking for an explanation to help me understand CSS better.

Here is the code:

CSS CODE:

#container {
    border: 2px solid black;
    overflow: auto;
}
.field {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 5px;
    border: 5px solid #FC0;
    line-height: 1.5em;
    overflow: hidden;
}
.w50 {
    width: 50%;
}
.w100 {
    width: 100%;
}

HTML CODE:

<div class="w50" id="container">
    <div class="field w50">
        <input type="text" size="100" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@">
    </div>
    <div class="field w50">content</div>
    <div class="field w100">content</div>
</div>

If I don't use overflow: hidden, the container has no top and bottom margins, but I do have overflow issues.

http://jsfiddle.net/8ErHQ/2/

If I use overflow: hidden, the container (apparently) has top and bottom margins, but my overflow issues go away.

http://jsfiddle.net/8ErHQ/1/

Is there a way to use overflow: hidden and avoid this extra white space?

Answer 1

The mysterious whitespace you're seeing is because you made the divs inline-block, and inline elements are adjusted to text baseline, leaving room for descenders (letters that "hang low") like "j" and "g".

You can avoid the issue by setting a vertical-align value to something other than baseline (which is the default), like middle:

.field {
    vertical-align: middle;
}

http://jsfiddle.net/8ErHQ/3/

...or just avoid using inline-block (float: left; instead, for instance)

For more information, you can check out https://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Answer 2

There is one other option you can do. Using the one without overflow: hidden; you can use this approach to fix your overflow issue.

Set your css to this.

   .field input {
       width: 100%;
    }

And change your input field to this.

         <input type="text" size="auto" value="input field that overflows @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@"> //Size was changed to AUTO

Here is what you get. http://jsfiddle.net/cornelas/8ErHQ/5/