html - div 顶部有空白空间，显示为 :inline-block

Question

我正在尝试将两个 div .cardbox、.previewbox 放置在容器 .cardcontainer 中，并使用 彼此相邻display:inline-block; 出于某种原因，右侧的 div .previewbox 顶部有一些空白空间，我不知道如何摆脱它。两个 div 都包含图像。我试过修改宽度和高度设置，认为它们对于盒子来说太大了，但似乎没有什么是正确的。非常感谢任何帮助或输入。

.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}

        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>

Answer 1

只需将 position: absolute 添加到 .previewbox

.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
  position:absolute;
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}

        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>