Use CSS to Remove the Space Between Images

Use CSS to remove the space between images

Make them display: block in your CSS.

How would I remove white space between images using CSS?

Set display: block for each img. Example in the snippet below. height is set just so the image isn't too big.

img {  display: block;  height: 150px;  }

<img src="http://i.imgur.com/B5vX1kN.jpg"/><img src="http://i.imgur.com/KYXOUfE.png"/>

How to remove space between image, and fix the :hover selector?

There are a number of things things that need addressing in your code to get the issues sorted:

1) The height and width of your images and iframe should not be defined as width="1179x1179" height="480x480". Instead use width="1179" height="480"

2) The padding on the text class was creating the extra space between the images. To fix this, I took the images out of the paragraph tags. Since paragraphs have a default margin, I placed margins instead on the container class. I also positioned the container class as relative, and then positioned the middle class as being absolute, in relation to the container element.

3) The text was displaying on hover over the incorrect image because the middle class had top position of -270px. I just gave this a position of 40%. This may not be the exact positioning you want, but you can play around with the values to get what you want

.image {  opacity: 1;  display: block;  transition: .5s ease;  backface-visibility: hidden;}
.container {  position: relative;  margin: 26px 0px;}
.container:hover .image {  opacity: 0.8;  background-color: black;}
.middle {  transition: .5s ease;  opacity: 0;  position: absolute;  top: 40%;  left: 50%;  width: 400px;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  text-align: center;}
.container:hover .middle {  opacity: 0.8;}
.text {  background-color: #81282A;  color: white;  font-size: 16px;  padding: 16px 32px;}

<div class="container">  <img src="https://picsum.photos/1179/480" height="480" width="1179" alt="Sample Image" /></div><div class="container">  <iframe height="480" width="1179" src="https://www.youtube.com/embed/zhEAhiPo5GE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="">            </iframe></div><div class="container">  <img src="https://picsum.photos/1179/480" alt="Sample Image" class="image" height="480" width="1179" />  <div class="middle">    <div class="text">      Check out our custom <br /> smart kitchen gallery here    </div>  </div></div><div class="container">  <img src="https://picsum.photos/1179/480" class="image" height="480" width="1179" alt="Sample Image" />  <div class="middle">    <div class="text">      We Service & Repair All      <br /> Types of Electronics    </div>  </div></div><div class="container">  <img src="https://picsum.photos/1179/480" height="480" width="1179" alt="Sample Image" />  <div class="middle">    <div class="text">      Electric Car Charging <br /> Base Installation    </div>  </div></div>

How to get rid of spaces between images in CSS?

Try use font-size: 0; on parent #content and then return it to your font size on children like font-size: 12px; ...

Or: use word-spacing: -.43em; on parent and return it to word-spacing: 0em; on children ...

I tested that, and seemed it will work.

Remove space between images

You can remove the spaces with Del:

<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><br><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>

Browsers interpret newlines as space, so you should remove them if you don't want to have one space there.

remove spacing at the sides and middle of images

To eliminate space around the entire page, set the body's margin to zero.

See HTML default body margin.
To make images fill the screen's width, set them to width:100%.
To eliminate the space between images, set them to display:block.

See Use CSS to remove the space between images.

body {  margin: 0;}
img {  display: block;  width: 100%;}

<a href="#">  <img src="//via.placeholder.com/300x50" alt="Sample Image"></a><img src="//via.placeholder.com/300x50" alt="Sample Image">

Use CSS to Remove the Space Between Images