Inner DIV seems to have bigger bottom margin - html

Question

I do not understand why in this simple code my .slot or .card classes seems to have a bigger margin/distance to their border at the bottom than at the top.
Thanks in advance,
JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/
<div id="hand">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
</div>
<div id="playfield">
<div class="slot" id="slot1"></div>
<div class="slot" id="slot2"></div>
<div class="slot" id="slot3"></div>
<div class="slot" id="slot4"></div>
</div>
The CSS:
#hand{
text-align: center;
width: 320px;
border: solid black 3px;
padding: 5px;
}
.card{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 5px 0px 5px;
}
#playfield{
width: 320px;
text-align: center;
border: solid black 3px;
padding: 5px;
}
.slot{
display: inline-block;
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 5px 0px 5px;
}
Thanks in advance!

Answer 1

If you are not comfortable with making the font-size:0 then here is a solution that i personally prefer.
Display:inline-block is tricky and has strange issues with margins. What i personally do is, i use float instead of inline-block. See this :
.card{
width: 60px;
height: 90px;
border-radius: 5%;
background: teal;
margin: 0px 10px;
float:left;
}
.slot{
width: 60px;
height: 90px;
border-radius: 5%;
border: dashed grey 2px;
margin: 0px 8px;
float:left;
}
What i did is, i added float:left to your .slot and .card and then created a new class .cls(clear:both) and applied that in the div structure. See if this helps.
http://jsfiddle.net/LgeAf/3/

Answer 2

Inline-block elements are tricky - because they are not treated as block elements when it comes to positioning them in the document flow. Their positions and spacings are influenced by CSS properties that control text, like line-height, word-spacing, letter-spacing and font-sizes.
If you set font-size in the parent containers, #card and #playfield, to 0, you will remove the extra bottom margin. See fiddle - http://jsfiddle.net/teddyrised/GwqcV/
#hand, #playfield {
font-size: 0;
}
The drawback of this method is that you will have to redeclare the font-size in the child elements if you are using relative font sizes, like ems.