Html div顶部有空白，显示为：inline block

我正在尝试将两个div

.cardbox

，

.previewbox

放置在容器

中。cardcontainer

与

显示：内联块相邻

由于某种原因，右侧的div

.previewbox

上面有一些空白，我不知道如何去掉。两个div都包含图像。我曾经尝试过修改宽度和高度设置，认为它们对于盒子来说太大了，但似乎没有任何东西能使它正确。非常感谢您的任何帮助或建议

.cardcontainer{
保证金：自动；
宽度：1260px；
高度：630px；
边界半径：3px；
背景色：白色；
背景图片：url（“images/program/cardbox.jpg”）；
背景重复：无重复；
背景大小：100%；
溢出：自动；
}
.cardbox{
高度：630px；
宽度：895px；
显示：内联块；
溢出：自动；
边界半径：3px；
边框：1px纯黑；
}
.previewbox{
高度：605px；
宽度：340px；
显示：内联块；
边界半径：3px；
边框：1px纯黑；
}
.卡片{
边框：4倍纯白；
宽度：141px；
高度：200px；
边界半径：3px；
显示：内联块；
}
.cardpreview{
宽度：300px；
高度：446px；
}

---

您需要做的是使用

垂直对齐将它们定位在顶部

在
.previewbox
和
.cardbox
上使用此选项：

vertical-align:top;

您需要做的是使用
vertical align
将它们定位在顶部

在
.previewbox
和
.cardbox
上使用此选项：

vertical-align:top;

您已为“.cardcontainer”指定了固定高度。“.previewbox”固定在其容器的底部。
我建议你把这个固定高度去掉，否则你可以这样做

vertical-align: top

您已为“.cardcontainer”指定了固定高度。“.previewbox”固定在其容器的底部。
我建议你把这个固定高度去掉，否则你可以这样做

vertical-align: top

在
cardbox
css类中添加
float:left

.cardbox {
    height: 630px;
    width: 895px;
    display: inline-block;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid black;
    float: left;
}

在
cardbox
css类中添加
float:left

.cardbox {
    height: 630px;
    width: 895px;
    display: inline-block;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid black;
    float: left;
}

添加此属性也将有助于您：

.cardbox {   
    float: left;
}
.previewbox {   
    float: left;
}

添加此属性也将有助于您：

.cardbox {   
    float: left;
}
.previewbox {   
    float: left;
}

只需将
位置：绝对
添加到
。预览框


.cardcontainer{
保证金：自动；
宽度：1260px；
高度：630px；
边界半径：3px；
背景色：白色；
背景图片：url（“images/program/cardbox.jpg”）；
背景重复：无重复；
背景大小：100%；
溢出：自动；
}
.cardbox{
高度：630px；
宽度：895px；
显示：内联块；
溢出：自动；
边界半径：3px；
边框：1px纯黑；
}
.previewbox{
位置：绝对位置；
高度：605px；
宽度：340px；
显示：内联块；
边界半径：3px；
边框：1px纯黑；
}
.卡片{
边框：4倍纯白；
宽度：141px；
高度：200px；
边界半径：3px；
显示：内联块；
}
.cardpreview{
宽度：300px；
高度：446px；
}

只需将
位置：绝对
添加到
。预览框


.cardcontainer{
保证金：自动；
宽度：1260px；
高度：630px；
边界半径：3px；
背景色：白色；
背景图片：url（“images/program/cardbox.jpg”）；
背景重复：无重复；
背景大小：100%；
溢出：自动；
}
.cardbox{
高度：630px；
宽度：895px；
显示：内联块；
溢出：自动；
边界半径：3px；
边框：1px纯黑；
}
.previewbox{
位置：绝对位置；
高度：605px；
宽度：340px；
显示：内联块；
边界半径：3px；
边框：1px纯黑；
}
.卡片{
边框：4倍纯白；
宽度：141px；
高度：200px；
边界半径：3px；
显示：内联块；
}
.cardpreview{
宽度：300px；
高度：446px；
}

ust add
position:absolute
to.
previewbox
ust add
position:absolute
to.
previewbox