I was playing around today trying to get these 3 images to display side-by-side within a 300px wrapper (they were 100px each) with no borders or anything, just flush. The simplified code below worked:

<div id="wrapper">
    <img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" />
</div>

But this wasn't very tidy and I also wanted to do some other things like captions so I started formatting the code ready for more embedded inline divs or something, so here I go:

<div id="wrapper">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
</div>

Refresh, and BOOM, the images now didn't fit and the last one was displayed below! I set all the margins and padding and anything else I could think of to 0 but it was still behaving in this odd way when I used carriage return in the editor, whats going on!?

2 answers

3
points

Elements that are inline, like img, are affected by white space. You can resolve your issue by floating the images (when they will become display:block;) and then white-space is ignored.

You will then likely need to use overflow:hidden; on the div to force it to shrink-wrap the floated elements.

Answered about 6 years ago by Tony Crockford
Mark 15
0
points

Know how if you enter more than one space in your HTML, it gets compressed into one? Same thing happens to your carriage returns. There's literally a space character in the output. Only way I know of fixing it is to put it back to how you had it before (on one line). Unless maybe you can hide it by setting the font-size to 0 or something, but I doubt that will work.

Answered about 6 years ago by Mark