删除图像之间的空间

Question

我希望一起显示一些图像，但在图像高度之间放置一个空格

我的部分代码

HTML：

<div class="work">
    <div class="work_hover">
        <a href="uploads/original/tg15.jpg" rel="cam"></a>
    </div>
    <img src="uploads/original/tg15.jpg" class="media" alt="">
</div>
<div class="work">
    <div class="work_hover">
        <a href="uploads/original/tg14.jpg" rel="cam"></a>
    </div>
    <img src="uploads/original/tg14.jpg" class="media" alt="">
</div>
<div class="work">
    <div class="work_hover">
        <a href="uploads/original/tg13.jpg" rel="cam"></a>
    </div><img src="uploads/original/tg13.jpg" class="media" alt="">
</div>
<div class="work">
    <div class="work_hover">
        <a href="uploads/original/tg12.jpg" rel="cam"></a>
    </div><img src="uploads/original/tg12.jpg" class="media" alt="">
</div>
<div class="work">
    <div class="work_hover">
        <a href="uploads/original/tg10.jpg" rel="cam"></a>
    </div><img src="uploads/original/tg10.jpg" class="media" alt="">
</div>

CSS：

.work {
    display: block;
    width: 33.3333%;
    height: auto;
    float: left;
    position: relative;
    overflow: hidden;
}

如何删除这个空间??

Answer 1

将行中所有图像的height属性设置为相同的内容。使用height:auto;时，图片将与动态width成比例，但您将获得该空间。