Unwanted space between row of inline-block elements and another row

Question

It isn't a table, I just used "row" for lack of a better word.

My problem is that I've got a set of display:inline-block elements and an element under those, but there's a gap between them. Note that I'm not talking about the space between the inline elements, I'm talking about the space between the row of inline elements and the other element. I've tried the solution mentioned here, setting a line-height and font-size, but that didn't help at all (which is why it isn't in the code below)

Here's my code:

HTML

    <div id="letterhead">
        <div class="name"></div><div class="logo"></div><div class="name"></div>
        <div class="subtext"></div>
    </div>

CSS

body{
    background:#eee;
    width: 100%;
}
#letterhead {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 12rem;
    font: 32px Tahoma;
    color: #777;
    padding: 2rem;
}
    .logo {
        display: inline-block;
        width: 7rem;
        height: 7rem;
        background: #000;
    }
    .name {
        display: inline-block;
        height: 7rem;
        width: calc((100% - 7rem) / 2);
        background: #fff;
    }
    .subtext {
        //position: absolute;
        margin: 0;
        padding: 0;
        top: 9rem;
        text-align: center;
        width: 100%;
        height: 1rem;
        background: #555;
    }

I made a Fiddle here.

Thanks in advance.

score 2 · Accepted Answer · answered Jun 02 '14 at 13:15

2

But it is because of your font-size and line-height. Set them to 0 on #letterhead and the unwanted white-space will dissapear. You wil have to set your font-size and line-height back on the children of #letterhead if you want to put content in them.

example: http://jsfiddle.net/skeurentjes/69MkQ/1/

answered Jun 02 '14 at 13:15

SKeurentjes

1,848
12
18

Will accept when I can. But I've got another question: how come it works when I apply it to the parent but not the children? – Richard Shi Jun 02 '14 at 13:18
If you want the parent to float, you put a float on the parent, not on the child element. Same here... – SKeurentjes Jun 03 '14 at 07:06

AlexTroy · Answer 2 · 2014-06-02T13:37:53.487

Just add margin:0 -4px 0 0 to your inline-block divs. And everything will be good. To remove space between rows you must set vertical:align:top. Check the DEMO

CSS

.logo {
        ...
        display: inline-block;
        margin:0 -4px 0 0;
        vertical:align:top
        ...
    }
    .name {
        ...
        display: inline-block;
        margin:0 -4px 0 0;
        vertical:align:top
        ...     
    }

Unwanted space between row of inline-block elements and another row

2 Answers2