встроенный блок добавляет пространство над первым элементом

Question

У меня есть поле, содержащее два деления, которые я должен стек горизонтально. Добавление строк inline-блоков их горизонтально, но первый элемент (#ss_cont) получает верхнее пространство 25px. Я проверил через контрольный элемент, не занимая ни поля, ни заполнения. поэтому мне пришлось использовать позицию: relative: top: -8px; что в этом ошибка? для вас, чтобы понять мою проблему полностью, я разделяю ссылки на то, над чем я работаю - рабочий HTML: http://goo.gl/EVpUum; Шаблон HTML: http://goo.gl/UnXniA;

<div id="box"> 
<div id="ss_cont"> 
    <img id="slideshow" src="slideshow.jpg"> 
    <div id="slid_controls"> 
    <a href="javascript:void(0)">&#9664;</a> 
    <p>Flex Engine Web Design</p> 
    <a href="javascript:void(0)">&#9654;</a> 
    </div> 
</div> 
<div id="sep"></div> 
</div> 

---

#box{ 
margin:80px auto 0px auto; 
width:675px; 
height:225px; 
border:2px solid #dddddd; 
background-color:white; 
} 
#box>*{margin:10px 0px 0px 10px;} 
#ss_cont{ 
width:304px; 
height:182px; 
display:inline-block; 
} 
#sep{ 
height:182px; 
width:0px; 
border:1px solid #dddddd; 
display:inline-block; 
} 
#slideshow{ 
width:300px; 
height:162px; 
border:2px solid #dddddd; 
} 
#slid_controls{ 
width:275px; 
height:20px; 
margin-left:15px; 
border-radius:0px 0px 5px 5px; 
background-color:#888888; 
} 
#slid_controls *{ 
display:inline; 
text-decoration:none; 
color:white; 
font-family:arial; 
font-size:12px; 
position:relative; 
top:4px; 
left:15px; 
} 
#slid_controls>p{padding:0px 45px 0px 45px;} 

Answer 1

Высота #ss_cont контейнера устанавливается равным 20 пикселей больше, чем высота #slideshow элемента изображения. Вы также должны рассмотреть возможность увеличения высоты вашей коробки, чтобы она соответствовала элементам управления.