Why does these inline-block element produce extra width? - html

Question

This is a follow up from this question: Autofit text under image with only css
Why does the inline-block divs in this code produce extra width on the right side of the elements?
.item {
display: inline-block;
background-color: red;
}
.image-container {
background-color: blue;
display: table;
width: 1%;
}
img {
height: 120px;
}
.text-wrapper {
overflow: hidden;
}
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
<div class="item">
<div class='image-container'>
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<div class='text-wrapper'>
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
</div>
</div>
Edit: This is NOT a problem with whitespace, see this jsfiddle without any whitespace and notice that the div still takes up lots of extra space (the red area): https://jsfiddle.net/2Lzo9vfc/332/
Edit2: To clarify my requirements: I have N images with varying width that I wish to layout in a "dynamic table", i.e. the images should be inline so they will automatically wrap when running out of horizontal space in parent. Where this gets tricky is that I have some text that I wish to display under each image that should wrap with the image width as well (and as I said, the image width may vary).

Answer 1

The red portion of the item is an artifact of the browser not knowing how to correctly size the containers. It's using the length of the text to determine the width before the table layout is applied. If you know the width of the items, you can use this simpler approach:
.item {
display: inline-block;
background-color: blue;
width: 120px;
}
.image {
display: block;
height: 120px;
}
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
<div class="item">
<img src='http://i.imgur.com/nV2qBpe.jpg' class="image">
<p class='text'>Some text that may need to wrap into multiple lines</p>
</div>
I don't know off hand of a way to make the elements shrink to the smallest possible width while still containing all child elements.

Answer 2

I modified #Brandon Gano's second answer. I used display: table-caption; on .text-wrapper.
Here's the CSS I modified from his jsfiddle:
.text-wrapper {
overflow: hidden;
display: table-caption;
caption-side: bottom;
height: 60px; /* You may have to modify the height */
background-color: blue;
}
And the updated jsfiddle.

Answer 3

You're seeing whitespace added between the inline-block elements. You can remove the horizontal space between these items by removing all whitespace between the elements. e.g.:
<div>
...
</div><div>
...
</div><div>
...
</div>
Note that the closing tag is immediately followed by the next opening tag.