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

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/