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

Question

I am a designing a website where I would like the header to have a height of 100px and a jQuery slider beneath it. I have decided to use the Jssor Slider since I like the way it performs. When I run my site, as I increase the width of the browser window, the slider container is increasing the amount of white space below the header.

I'm not really sure why this is occurring and I have tried playing around with the CSS by putting in white-space:nowrap & display:inline-block within the slider container itself but that's still not working.

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%;
}

Any help would be greatly appreciated! Thank you.

Answer 1

UPDATE

I just realized that you used display:inline-block; ,this is what is causing your margin, you can either remove it, change it to display:table; or give a negative margin of -4px that will eliminate the blank space in between. You may need to adjust that negative margin according to your need but it will do the trick.

You can find more about Fighting the Space Between Inline Block Elements HERE

Answer 2

It looks like your slider is absolutely positioned. Why not decrease the top attribute to something like top:100px; ? You can decrease/increase it to your liking.