Removing whitespace between HTML elements when using line breaks

Sorry if this is old but I just found a solution.

Try setting the font-size to 0. Thus the white-spaces in between the images will be 0 in width, and the images won't be affected.

Don't know if this works in all browsers, but I tried it with Chromium and some <li> elements with display: inline-block;.


You could use comments.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

I'd worry about the semantics of having a series of images side by side though.


Flexbox can easily fix this old problem:

.image-wrapper {
  display: flex;
}

More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.

Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.

Tags:

Html

Css

Image