CSS удалить пустое пространство между заголовком и JQuery слайдер

Question

Я разработке веб-сайта, где я хотел бы заголовок, чтобы иметь высоту 100px и ползунок JQuery под ним. Я решил использовать Jssor Slider, так как мне нравится, как он работает. Когда я запускаю свой сайт, когда я увеличиваю ширину окна браузера, контейнер слайдера увеличивает количество пробелов ниже заголовка.

Я не совсем уверен, почему это происходит, и я пытался играть вокруг с CSS, поставив в бело-пространстве: Nowrap & дисплей: встроенный блок внутри контейнера слайдера себя, но это еще не за работой.

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

Похоже, ваш слайдер абсолютно позиционирован. Почему бы не уменьшить атрибут top на что-то вроде top:100px;? Вы можете уменьшить/увеличить его по своему вкусу.

Answer 2

UPDATE

Я просто понял, что вы использовали display:inline-block;, это то, что вызывает у вас запас, вы можете либо удалить его, изменить его display:table; или дать отрицательный запас -4px, что позволит устранить пробел пространство между ними. Возможно, вам придется настроить этот отрицательный запас в соответствии с вашими потребностями, но он будет делать трюк.

Вы можете узнать больше о Fighting the Space Between Inline Block Elements HERE