CSS空间起源未知

Question

我正在尝试与某人解决这个问题，但我们无法解决这个问题。

当媒体查询开始.entry变为display: table;而.entry-wrap和.entry-footer变为display: table-cell时，会发生什么。

问题是桌面布局开始后有一个空格，我不知道为什么它会在那里以及如何让它消失。

我已经在这里上传了设计[链接移除设计不适合公众]。

Answer 1

请在适当的媒体查询中添加以下内容：

.entry-wrap {
   display: table-cell;
   vertical-align: top; /* <- add this line */
}

最终你也可以添加它：

.entry-footer {
   display: table-cell;
   vertical-align: bottom; /* <- add this line */
   width: 190px;
   background-color: #489eba;
}

Answer 2

您在style.css的第5548行拥有此CSS规则：

.entry,
.entry-comments,
.comment-respond,
.author-box {
  background: #b7d9e4;
  border-top: 6px solid #489eba;
}

这适用于article#post-xxxx个元素，因为它们上面有entry个类。空间来自border-top属性。

border-top与带铅笔的右栏颜色相同，所以看起来空间可能是边框以外的其他地方，而不是。如果更改边框颜色，则可以清楚地看到边框的应用方式。