CODEWITHSUNDEEP
overflowcss
pbarney
pbarney

Reputation: 2833

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

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?

Upvotes: 10

Views: 9495

Answers (3)

xec
xec

Reputation: 18024

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

Upvotes: 13

Cam
Cam

Reputation: 1902

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/

Upvotes: 1

Stefan Gruenwald
Stefan Gruenwald

Reputation: 2640

Put a margin value in your .w50 and .w100 statement.There might be other fixes, but that's the fastest I could think of.

    .w50 { margin: 0 0 -7px 0; width: 50%; }
    .w100 { margin: 0 0 -4px 0; width: 100%; }

Upvotes: -1

Related Questions