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

インライン ブロック要素は、ドキュメント フロー内での配置に関してブロック要素として扱われないため、注意が必要です。それらの位置と間隔は、line-height、word-spacing、letter-spacing、font-sizes などのテキストを制御する CSS プロパティの影響を受けます。

親コンテナーの font-size を 0 に設定する#cardと#playfield、余分な下マージンが削除されます。フィドルを参照してください - http://jsfiddle.net/teddyrised/GwqcV/

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

この方法の欠点は、em などの相対的なフォント サイズを使用している場合、子要素で font-size を再宣言する必要があることです。

于 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 に答える