html - 在 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 */  
    }

在这里工作:http://jsfiddle.net/HhVQ5/1/