CSS删除标题和jQuery滑块之间的空白

Question

我正在设计一个网站，我希望标头的高度为100px，并在其下方使用jQuery滑块 。 我决定使用Jssor Slider，因为我喜欢它的执行方式。 当我运行网站时，随着我增加浏览器窗口的宽度，滑块容器也增加了标题下的空白空间。

我不太确定为什么会这样，并且我尝试通过在滑块容器本身中放入空白：nowrap和display：inline-block来玩CSS，但这仍然无法正常工作。

HTML：

<header>
<!-- Header elements inside here -->
</header>

<!--Begin Jssor Slider -->

<div id="slider1_container" style="position: relative; margin: 0 auto;
    top: 0px; left: 0px; width: 1300px; height: 600px; overflow: hidden;white-space:nowrap;display:inline-block;">


    <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 150px; width: 1300px;
        height: 600px; overflow: hidden;">
<!--Additional Slider divs for containing pictures, arrows, etc. -->
    </div>
</div>

CSS：

header {
    background: #FFF;
    height:100px;
    position:fixed;
    z-index:100;
    width:100%;
}

任何帮助将不胜感激！ 谢谢。

Answer 1

UPDATE

我只是意识到您使用了display:inline-block; ，这就是造成您的保证金的原因，您可以删除它，或者将其更改为display:table; 或提供-4px的负边距，以消除两者之间的空白。 您可能需要根据需要调整该负边距，但这可以解决问题。

您可以在此处找到更多有关在行内块元素之间进行战斗的信息

Answer 2

看起来您的滑块已完全定位。 为什么不将top属性减小为top:100px; ？ 您可以根据自己的喜好减少/增加它。