html - 由于显示导致布局间隙 :table

Question

我遇到了一个困难，它是关于 display:table 的，我当时正在开发一个单页网站，现在我有一个导航栏和一个 .product 部分。在 .product 部分内，我有一个轮播，我希望轮播垂直居中，所以我使用了以下技术::

@media only screen and (min-width : 768px) {
    .products {
        height: 100%;
        display: table;
        width: 100%;
    }
    .products .carousel-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
}

<强> FIDDLE HERE

不幸的是，如果我添加 display:block，则 .product 部分和 nav 元素(这两个同级元素)之间有一个间隙到产品部分，我的布局被搞砸了，但间隙消失了，所以我需要坚持 table 。为什么会有间隙，我已经检查了边距和填充，但没有，所以我没有看到任何明显的间隙存在，但它仍然存在。

有人能告诉我为什么我会出现这么大的差距吗？

Answer 1

您的 .navbar 类中有一个 margin-bottom: 20px;

并且您有 2 个高度为 50 px 的跨度

这就是你的 fiddle 差距

你拨弄 fork :http://jsfiddle.net/ej8dtd1z/