0

i want to show some image together but put a space between image in height

enter image description here

part of my code

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;
}

how can remove this space ??

sadegh
  • 1,720
  • 1
  • 16
  • 30

2 Answers2

0

Set the height attribute of all the images in the row to the same thing. With height:auto; the image will stay proportionate with the width being dynamic, but you'll get that space.

9Deuce
  • 689
  • 13
  • 27
0

Another option would be resize the image (with a software like Microsoft Office Picture Manager, or editing css, like mentioned above)

Elender Góis Gallas
  • 15
  • 1
  • 6