如何删除这些神秘空间？

Question

提前抱歉愚蠢的问题 - 我有一个容器和5个内部div.当内部div只有文本内容时,它看起来像这样:
但是,如果我从所有div中删除文本内容并首先添加带有跨度的div,它将如下所示
如果除了第一个(具有混合内容)之外的所有div都有文本内容 - 如下所示:
容器的CSS:

.list {
    display: inline-block;
    font-size: 0;
    height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    right: 0;
    white-space: nowrap;
}

内部div的CSS:

.list > div {
    background-image: url();
    background-size: cover;
    box-sizing: padding-box;
    display: inline-block;
    font-size: 15px;
    height: 100%;
    max-height: 752px;
    max-width: 1280px;
    padding: 0.7% 1.3% 0.3%;
}

在这里,您可以查看整个HTML和CSS.

发生了什么,是不是有些textNodes搞砸了？

Answer 1

这就是display: inline-block;你放入一些内容时的行为方式.如果你添加vertical-align: top;了.list > divCSS选择器,那么无论内容如何,​​它们都将重新对齐到容器的顶部.