Mysterious Padding

Question

This is a much-simplified version of a layout I'm working on. I've pared it down for berevity and to make the problem I'm having more apparent.

I cannot determine where the padding between elements wrapped in 'wrapper1' is coming from. Ideally I shouldn't be able to see any of the red from wrapper1's background and everything inside should be snug up against each other.

Any ideas?

CSS

.wrapper1 {
    float:left;
}

.wrapper2 {
    background-color:#F00;
}

.box-outer {
    display:inline-block;
    background-color:#09F;
    width:50px;
    height:108px;
}

.wrapper3 {
    display:inline-block;
    background-color:#390;
    border:2px solid #000;
}

.box-inner {
    background-color:#999;
    position:relative;
    border:2px solid #FF0;
    width:300px;
    height:100px;
}

HTML

<div class="wrapper1">
    <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>  
        <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>
        <div class="wrapper2">
        <div class="box-outer"></div>
        <div class="wrapper3">
            <div class="box-inner">
            </div>
        </div>
    </div>
</div>

Answer 1

You turned the inner divs into inline elements, which means that they will use the white space between them.

Write it like ...</div><div ... and the gaps will go away.

Edit: oh, that's just the horizontal space taken care of. The vertical space is caused by the inner divs being positioned on the baseline and the outer div leaving room below the baseline. vertical-align should solve that.

Answer 2

Mr. Lister is right that it's the white space giving you issues with inline-block.

Rather than have to fight this by removing white space from your markup...

Unless you have a compelling reason to use inline-block, it seems this layout works fine by replacing those instances with float:left (which in turn, implicitly applies display:block).

Demo: http://jsfiddle.net/yV89U/