Just to clarify, this is not a table. I used "row" as a placeholder term.
My issue involves a set of inline-block elements with a gap below them when compared to another element on the page. This is different from the space between the inline elements themselves. I attempted a solution mentioned here, adjusting the line-height and font-size properties, but it didn't resolve the problem (which explains why it's not included in the code below)
Below is 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 created a Fiddle here.
Appreciate any assistance you can provide.