Keep spacing between elements but no spaces between Tags

1

I'm removing% whitespace from my Todos files in order to have a good size reduction (on average 5%), but when I do, whitespace is removed between elements when HTML is rendered in the browser like this:

Signedwithredarrowswheretheblankswere.

HTMLRespective:

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

Image of HTML with spaces between rendered tags:

HTMLRespective:

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

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

    
asked by anonymous 31.05.2015 / 17:16

1 answer

1

Use 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=''/>
    
31.05.2015 / 18:31