Vertical alignment of nested spans within div rows - css

Question

Nothing I can find or have tried is working so I hope someone can tell me where I am going wrong. I have a table-like HTML structure with div rows containing only span cells. These in turn can contain either a single span or two rows of spans. Unfortunately, for some reason I've been wrestling with on and off for weeks, the single span cells do not align with the double-row cells.
The minimal HTML is:
<div id="box">
<div id="rowA" class="row">
<span class="container">
<span class="top">A</span>
<span class="bottom">B</span>
</span>
<span class="container">
<span class="single">C</span>
</span>
</div>
<div id="rowB" class="row">
<span class="container">
<span class="top">D</span>
<span class="bottom">E</span>
</span>
<span class="container">
<span class="single">F</span>
</span>
</div>
</div>
with CSS,
body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;}
span.container {
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}
The double row cells (e.g. <span class="container"><span class="top">D</span><span class="bottom">E</span></span>) display correctly, the single row cells are shifted downwards for some reason. I know that I can use positioning to correct for the problem but I'd like to understand where I am going wrong. It's tested on Chrome and Firefox and alas their inspectors leave me none the wiser.
All contributions very gratefully received!

Answer 1

body {
font-size: 16px;
}
div#box {
width: 716px;
height: 255px;
margin: 10px auto;
}
div.row {
width: 712px;
height: 47px;
padding: 1px;
padding-left: 4px;
margin-left: auto;
margin-right: auto;
}
span.container {
vertical-align:top; /* ADD JUST THIS LINE */
display: inline-block;
width: 40px;
height: 40px;
margin-top: 2px;
padding: 1px;
border: 1px solid black;
border-radius: 4px;
}
span.top, span.bottom {
display: inline-block;
width: 100%;
height: 50%;
line-height: 20px;
vertical-align: middle;
}
span.single {
display: inline-block;
width: 100%;
height: 100%;
line-height: 40px;
vertical-align: middle;
text-align: center;
}