sum of elements' width is 100% but the last element goes to next line

Question

I have 3 <img> elements in a div like this:

<div>
   <img style="width: 10%;">
   <img style="width: 80%;">
   <img style="width: 10%;">
</div>

but the last image goes to next line. the box-sizing property of the div is border-box.

what is the problem?

It's because inline elements (like `img` elements) respect the whtiespace in the markup... see [this answer](http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements/19038859#19038859). — Josh Crozier, Mar 27 '15 at 19:47

score 3 · Answer 1 · answered Mar 27 '15 at 19:51

3

Images and other inline elements are affected by whitespace in the html. This example shows your html with whitespace removed. http://jsbin.com/qoxedepifi/1/edit?html,css,output. You could set the display: inline-block; float:left which will ignore white-space. Or you could set the property white-space-collapse: discard; on the parent element.

answered Mar 27 '15 at 19:51

Michael Jasper

7,962
4
40
60

Actually.. `white-space-collapse: discard` currently isn't supported by any browsers. It doesn't seem like it will be any time soon eiither.. http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing – Josh Crozier Mar 27 '15 at 19:57

score 0 · Answer 2 · answered Mar 27 '15 at 19:51

0

img{float:left;}

Your can add float left on the images.

answered Mar 27 '15 at 19:51

Ohsik

261
3
10

sum of elements' width is 100% but the last element goes to next line

2 Answers2