Html 内联块在第一个元素上方添加空间

我有一个包含两个分区的框，我必须水平堆叠。添加内联块将它们水平堆叠，但第一个元素（#ss_cont）的顶部空间为25px。我通过inspect元素检查它的边距和填充。所以我不得不使用position:relative:top:-8px；这里面有什么错误？ 为了让您完全了解我的问题，我将分享我正在研究的内容的链接- 工作HTML:； 模板HTML:

---

#ss#u cont容器的高度设置为比#幻灯片图像元素的高度大20像素。你也应该考虑增加盒子的高度，以适应控件。

你是对的，但是它并没有完全消除间隙。我将#sep height从200px更改为182px，但仍然存在8px的间隙。如果您指的是控件和框底部之间的间隙，那只是#box容器的属性。链接：。另一方面，我通过删除顶部位置、修改左侧位置并使用文本对齐：居中来居中滑动控件的文本。我说的是#ss#u cont上方的空间。在JSFIDLE中，位置是对的，不知道为什么在我的网页中，8px是一个任意值不能正常工作。添加垂直对齐：顶部；将所有堆栈元素的顶部对齐到一条水平线，以满足我的要求。但是在使所有元素高度相等之后，就不需要垂直对齐属性了。可能有一个简单的CSS属性混合在其中，在JSFIDLE中被删除，或者一些外部CSS把它搞乱了。

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