CSS: Remove White Space Between Images
This article is all about having images display without any white space between them. By default, images are displayed as inline elements. Setting them to block elements will remove the space between them and put them on their own line. Then, setting their margin to
margin: 0 auto; will center them, for example.
Another solution is to
float: left; (or
right) the images but be sure to add a
<div style="clear:both;"></div> before and after the images to prevent wrapping of the page around them. If using
float then the
display: block; has no effect.
Yet another solution is to
display: flex; to the images' container/parent element but
float: has no effect in this case. Displaying the images as
block makes no difference, either. The image
margin, however, does play a part. Flexbox, as it is called, is quite powerful (in more ways than just using it to remove whitespace between images).
display: grid; is similar to a flexbox but browser support is somewhat limited.
Related: Format Images with Varying Aspect Ratios to a Common Aspect Ratio and Create Cards with a Horizontal Scroll and a Snap-to Feature.
Finally, use a
table to organize the images on the page and set the
img CSS to
display: block;. Also, make sure the table has the CSS properties
border-collapse: collapse; border-spacing: 0; set and that the table cells (
td) have the CSS property
padding: 0; set.