Unwanted space between row of inline-block elements and another row [duplicate] - html

Question

This question already has answers here:
Why does my image have space underneath?
(3 answers)
Closed 7 years ago.
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.

Answer 1

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/

Answer 2

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
...
}