Удаление пространства между изображениями

Question

image У меня есть блок изображений, но они не связаны друг с другом, мне нужно удалить пробелы и заставить их выглядеть прикрепленными. Я попытался следующие, но не работает

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

Это мой 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> 

Пожалуйста, смотрите изображение, где проблема.

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>

это что-то вроде этого вы ищете?

Я сделал это с помощью flexbox, который вы предоставили родительскому изображению изображений: flex;

, если вы не хотите, чтобы они друг рядом друг с другом вы можете сделать это таким образом

.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

Пожалуйста, попробуйте следующее:

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