<img> element and display:table-cell

Question

I am trying to replace images in a single horizontal row - as cells in a table row.

That layout works with any other elements but not with <img> for some reason.

Check this:

div { display: table; border: 1px solid red; }
div > img { display: table-cell; }

<p>These shall be replaced in single row but they are not:</p>

<div>
  <img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg" />
  <img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg" />
  <img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg" />
</div>

Any idea?

UPDATE: FF follows CSS spec and replaces them in single row. All other browsers are not. Heil Firefox!

Answer 1

EDIT

img is a replaced element, it's measured calculations and box model are different. See this ARTICLE

---

If you insist on using table and are concerned about spacing look at this fork of @StevenThomas's PenCode

I removed all the divs

.container { display: table; table-layout: auto; width: 100%; }

img { display: inline-table; margin: .33em; width: 30%; height: auto; }

Use margin: .125em if you want 4px; border-spacing.

---

Change div to inline-block

Change img to inline-block

div {
  display: inline-block;
  border: 1px solid red;
}
div > img {
  display: inline-block;
}

<p>These shall be replaced in single row but they are not:</p>

<div>
  <img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg">
  <img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg">
  <img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg">
</div>