删除图像之间的空间

Question

image I have a block of images but they are not connected to one another, I need to remove the spaces and make them looked attached. I have tried the following but doesn't work

img {
 border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
float:left;
line-height:0;
}

This is my html

  <div class="col-xs-4 col-md-3 ">
            <div class="hovereffect">
             <img src="images/plasma.jpg" alt="Plasma" id="space">
            <div class="overlay">
           <h3>
           <a href="#" class="link">Creativity on Combined Photos</a>
           </h3>
            <p> 
                <a href="#" class="link">LINK HERE</a>
            </p> 
        </div>
      </div> 
      </div>

Please see the image where the problem is.

Answer 1

 .test{ display:flex } 

 <div class="test"> <div class="hovereffect"> <img src="http://placehold.it/350x150"> <div class="overlay"> <h3> <a href="#" class="link">Creativity on Combined Photos</a> </h3> <p> <a href="#" class="link">LINK HERE</a> </p> </div> </div> <div class="hovereffect"> <img src="http://placehold.it/350x150"> <div class="overlay"> <h3> <a href="#" class="link">Creativity on Combined Photos</a> </h3> <p> <a href="#" class="link">LINK HERE</a> </p> </div> </div> </div> 

is it something like this you are looking for?

I did this with flexbox you just give the parent of the images display:flex;

if you not want them one next to each other you can do it this way

 .test{ display:flex; flex-direction:column } .hovereffect{ display:flex; } 

 <div class="test"> <div class="hovereffect"> <img src="http://placehold.it/350x150"> <div class="overlay"> <h3> <a href="#" class="link">Creativity on Combined Photos</a> </h3> <p> <a href="#" class="link">LINK HERE</a> </p> </div> </div> <div class="hovereffect"> <img src="http://placehold.it/350x150"> <div class="overlay"> <h3> <a href="#" class="link">Creativity on Combined Photos</a> </h3> <p> <a href="#" class="link">LINK HERE</a> </p> </div> </div> </div> 

Answer 2

Please try this:

img {
border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
margin:0;
line-height:0;
}