Maintain spacing between elements but no spacing between tags

Question

I’m removing Todos the whitespace of my files HTML aiming to have a good reduction of its size (on average 5%) however when I do it is removed the white space between the elements when the HTML is rendered in the browser this way:

Marked with red arrows where the white spaces were.

HTML Respective:

<img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/><img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/><img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/>

Image of HTML with spaces between rendered tags:

HTML Respective:

<img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/> <img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/> <img src="https://pbs.twimg.com/profile_images/1252616952/650camaro-3_normal.jpg"/>

How do I get the spacing pore without having any space between tags? spacing should not generate a horizontal scrollbar (which usually happens when checkers a margin).

Answer 1

Utilize inline-block and apply a margin between them:

img {
    border: 2px solid #ccc;
    display: inline-block;
    margin: 4px
}

<img src='http://i.stack.imgur.com/8ybwB.jpg' alt=''/><img src='http://i.stack.imgur.com/8ybwB.jpg' alt=''/><img src='http://i.stack.imgur.com/8ybwB.jpg' alt=''/><img src='http://i.stack.imgur.com/8ybwB.jpg' alt=''/>