內聯塊增加第一個元素上方的空間

Question

我有一個包含兩個分區的框，我必須水平堆疊。添加內嵌塊將它們水平堆疊，但第一個元素（#ss_cont）獲得25px頂部空間。我通過檢查元素檢查它的邊距或填充。所以我不得不使用position：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容器的高度被設定爲比#slideshow圖像元素的高度大20個像素。您還應該考慮增加箱子的高度以適應控件。