auto-generated margins display inline [duplicate] - css

Question

This question already has answers here:
Why does my image have space underneath?
(3 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I have the following problem: I want to have three images in the same line, without margins in between. The problem is that when using display:inline or display:inline-block vertical and horizontal white spaces are generated between the images.
div img{
width: 33.3333%;
display: inline-block;
}
You can see the problem in the demo.
I know that with float:left I can solve the problem, but I would like to avoid this, because I don't like to use this unless is very necessary.
Thanks!

Answer 1

If you don't want to use float: left, You can clear out the space between the image tag by using HTML comment block.
Working example.
CSS :
div img {
width: 33.3333%;
display: inline-block;
}
HTML :
<div>
<img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg"><!--
--><img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg"><!--
--><img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg">
</div>

Answer 2

Solution using Flexbox
You can set the parent div to have flexible layout using display: flex. It removes the white-space as well.
div {
display: flex;
align-items: flex-end;
}
div img {
width: 33.3333%;
display: inline-block;
}
<div>
<img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
<img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
<img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>
Solution using margin-right
div img {
display: inline-block;
margin-right: -0.33em;
width: 33.3333%;
}
<div>
<img src="http://imagenesdereligion.com/wp-content/uploads/2014/10/imagenes-de-santa-claus-santa_cla.jpg" />
<img src="http://www.conhijos.es/wp-content/uploads/2010/10/RatonPerez.jpg" />
<img src="http://hazteconellos.com/wp-content/uploads/2013/12/reyesmagos-1.jpg" />
</div>