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 inline or 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.

Comment