0

我不明白为什么在这个简单的代码中，我的 .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;
}

提前致谢！

4

2 回答 2

0

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

如果您在父容器中设置 font-size#card和#playfield, 为 0，您将删除额外的底部边距。见小提琴 - http://jsfiddle.net/teddyrised/GwqcV/

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

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

于 2013-04-17T13:01:06.457 回答
0

如果您对设置 font-size:0 感到不满意，那么这是我个人更喜欢的解决方案。

Display: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/

于 2013-04-17T13:11:43.060 回答