Отступ...

[Mestniy96]

Помогите пожалуйста! Вот ссылка на страницу. Там между слайд-шоу и текстом большой пробел и снизу отступ. Ничего понять не могу.  Как убрать эти пробелы?

Вот html:

<!--Это слайдер--><!--We will make a slider with stylized thumbnails using CSS3The markup is very simple:Radio InputsLabels with thumbnails to detect click eventMain Image--><div class="slider"><input id="id1" name="slide_switch" type="radio" /> <label for="id1"> <img src="/karikaturi/images.jpg" style="position: absolute; left: 0px; top: 0px; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; transform: scale(1.1); line-height: 20.7999992370605px;" /><img src="/karikaturi/remont.jpg" style="position: absolute; left: 0px; top: 0px; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 0; transform: scale(1.1); line-height: 20.7999992370605px;" /><img src="/karikaturi/carikatura-programm.jpg" width="100" /> </label> <img src="/karikaturi/carikatura-programm.jpg" /> <!--Lets show the second image by default on page load--> <input checked="checked" id="id2" name="slide_switch" type="radio" /> <label for="id2"> <img src="/karikaturi/carikatura-programm-2.jpg" width="100" /> </label> <img src="/karikaturi/carikatura-programm-2.jpg" /> <input id="id3" name="slide_switch" type="radio" /> <label for="id3"> <img src="/karikaturi/64479384.jpg" width="100" /> </label> <img src="/karikaturi/64479384.jpg" /> <input id="id4" name="slide_switch" type="radio" /> <label for="id4"> <img src="/karikaturi/images.jpg" width="100" /> </label> <label for="id5"><img src="/karikaturi/remont.jpg" width="100" /> </label></div><!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixesYou can download it from http://leaverou.github.com/prefixfree/ --><script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

А вот CSS:

/*Time for the CSS*/* {margin: 0; padding: 0;}body {background: #ccc;}.slider{ width: 640px; /*Same as width of the large image*/ position: relative; /*Instead of height we will use padding*/ padding-top: 320px; /*That helps bring the labels down*/  margin: 100px auto;  /*Lets add a shadow*/ box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}/*Last thing remaining is to add transitions*/.slider>img{ position: absolute; left: 0; top: 0; transition: all 0.5s;}.slider input[name='slide_switch'] { display: none;}.slider label { /*Lets add some spacing for the thumbnails*/ margin: 18px 0 0 18px; border: 3px solid #999;  float: left; cursor: pointer; transition: all 0.5s;  /*Default style = low opacity*/ opacity: 0.6;}.slider label img{ display: block;}/*Time to add the click effects*/.slider input[name='slide_switch']:checked+label { border-color: #666; opacity: 1;}/*Clicking any thumbnail now should change its opacity(style)*//*Time to work on the main images*/.slider input[name='slide_switch'] ~ img { opacity: 0; transform: scale(1.1);}/*That hides all main images at a 110% sizeOn click the images will be displayed at normal size to complete the effect*/.slider input[name='slide_switch']:checked+label+img { opacity: 1; transform: scale(1);}/*Clicking on any thumbnail now should activate the image related to it*//*We are done */

[rus]

[Andryshok]

Видимо уже поменяли класс .slider и .... неправильно , нужно так

.slider {    width: 640px;    position: relative;    padding-top: 120px;    margin: 10px auto;    box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.75);

Результат налицо    

Попутно читаем про свойство margin что оно делаети как им пользоваться

Edited April 25, 2015 by Andryshok

[Mestniy96]

Спасибо Вам огромное за помощь. Оба ответа мне понравились и их есть где примениь...Спасибо