在html中顯示不需要的背景

Question

我正在嘗試將4個圖像集成在一起。但不幸的是，圖像填充底部的幾個像素。

你可以看到這裏的問題：

我只是想關閉所有圖像，而無需任何邊界或填充。

CSS：

#play { 
     padding: 0px; 
     margin: 0px; 
    } 

    .ui-grid-b img { 
     width : 100%; 
     height : auto; 
     } 


    #play ul { 
     border: 0px solid black;  
     margin: 0 auto; 
     width: 50%; 
     height: 450px; 
     float: left; 
     padding: 0; 
    } 

    #play ul li { 
     background-image: none; 
     list-style-type: none; 
    } 

    #play ul li.list1 { 
     background-color: #ff0000; 

    } 
    #play ul li.list2 { 
     background-color: #00ff00; 

    } 

HTML：

<div id="play" class="ui-grid-b"> 
    <ul id="list1"> 
     <li class="list1"> 
      <img src="images/img1.jpg" alt="Smiley face"> 
     </li> 
     <li class="list1"> 
      <img src="images/img3.jpg" alt="Smiley face"> 
     </li> 
    </ul> 
    <ul id="list2"> 
     <li class="list2"> 
      <img src="images/img2.jpg" alt="Smiley face"> 
     </li> 
     <li class="list2"> 
      <img src="images/img4.jpg" alt="Smiley face"> 
     </li> 
    </ul> 
</div> 

Answer 1

添加font-size: 0;您#play ul li「的CSS屬性：

#play ul li { 
     background-image: none; 
     list-style-type: none; 
     font-size: 0; /* <-- the magic */ 
    } 

她的工作e：http://jsfiddle.net/HhVQ5/1/

Answer 2

李，據我瞭解有它自己的默認填充和邊距太。嘗試通過使用刪除它們

#play ul li { 
    background-image: none; 
    list-style-type: none; 
    padding:0; 
    margin:0; 

}