Question

我不明白为什么在这个简单的代码中，我的.slot或.card类似乎在底部的边界处比在顶部有更大的边距/距离。

提前致谢，

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>

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

提前致谢！

Answer 1

内联块元素很棘手 - 因为在将它们放置在文档流中时，它们不会被视为块元素。它们的位置和间距受控制文本的CSS属性的影响，如行高，字间距，字母间距和字体大小。

如果您将父容器#card和#playfield中的font-size设置为0，则会删除额外的下边距。请参阅小提琴 - http://jsfiddle.net/teddyrised/GwqcV/

#hand, #playfield {
    font-size: 0;
}

此方法的缺点是，如果使用相对字体大小（如ems），则必须重新声明子元素中的font-size。

Answer 2

如果你不习惯使用font-size：0，那么这是我个人喜欢的解决方案。

显示：内联块很棘手，并且边距有奇怪的问题。我个人所做的是，我使用float而不是inline-block。见：

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

我做的是，我将 float：left 添加到.slot和.card，然后创建了一个新类 .cls（clear：both）并应用了在div结构中。看看这是否有帮助。

http://jsfiddle.net/LgeAf/3/

内部DIV似乎有更大的底部保证金

2 个答案: