奇怪5px的保證金

Question

我在這裏建立一個網站：argit.bounde.co.uk

我一直在尋找了幾個小時，試圖找到解決方案。我正在嘗試構建自己的滑塊，它的寬度是流體寬度，所以我不能在可能的情況下定義高度/寬度。我有大量的滑塊處理庫存圖片，但是當我將元素放在它下面時，它們比它們的意圖要低5px。這發生在除我已經測試的IE瀏覽器之外的所有瀏覽器中。我想給我的滑塊下面的橫幅負頂邊距，以便它將顯示在滑塊上，但直到我可以找出是什麼導致這5px的邊際我不能。

的HTML是在這裏：

<div id="slider"> 
    <div id="sliderwidth"> 
    <ul> 
     <li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li> 
     <li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li> 
     <li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li> 
     <li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li> 
    </ul>       
    </div>       
</div> 

<div id="sliderborder"> 

事情我已經嘗試：

刪除所有的jQuery：沒有工作。
刪除所有CSS樣式滑塊：沒有工作。
將img高度設置爲300px：沒有工作。
將li高度設置爲300px：措辭。
用divs替換imgs 300px高：工作。
設置填充0，邊距0到滑塊中的每個元素：沒有工作。
檢查驗證錯誤：完全驗證。
選中的圖片高度爲300px：它們是。
檢查開發工具中的每個元素以檢查是否存在任何流氓邊距/填充：沒有找到。

我從字面上理念，任何幫助將不勝感激！

Answer 1

沒有什麼奇怪的......只需將display:block添加到您的圖像。

默認情況下，所有圖像都是inline-elements（內聯或內聯塊）並作爲一行文本處理。這個空間是y或g的掛起部分去的地方。這很糟糕的解釋，但你明白了。

div#slider ul li img { 
    width: 100%; 
    display: block; 
} 

Answer 2

只是

div#slider ul img { 
    display: block; 
    width: 100%; 
} 

或

div#slider ul img { 
    vertical-align: top; 
    width: 100%; 
} 

因爲默認情況下，圖像是inline-block的元素，因此他們可能需要一個適當的垂直對齊設置

Answer 3

所有你必須嘗試要做的只是添加vertical-align: bottom;像這樣：

div#slider ul li img { 
    width: 100%; 
    vertical-align: bottom; 
} 

Answer 4

修復了我的問題！因爲你有空格或進入（背後的li元素）在你的代碼我客串

#slider ul li { 
    font-size: 0; 
}