auto-generated margins display inline

Question

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!

This is due to there being whitespace between your `` tags, see http://stackoverflow.com/a/5078297/65971 — ckuijjer, Jul 04 '15 at 19:57
For compatibility purposes, though, I'd say you'd be better off using float. Why don't you like using it? As long as you clear the floated items it shouldn't make any difference to your overall page flow. — Joe Czucha, Jul 04 '15 at 20:04
The horizontal space is explained in [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630), and the vertical one in [Why does my image have space underneath?](http://stackoverflow.com/q/17905827/1529630). — Oriol, Jul 04 '15 at 20:21

score 1 · Accepted Answer · answered Jul 04 '15 at 19:58

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>

It worked! And for the margin below I used vertical-align:bottom. Thanks!!! — Alvarado87, Jul 05 '15 at 08:54

m4n0 · Answer 2 · 2015-07-04T20:04:45.597

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>

auto-generated margins display inline

2 Answers2