How do I get rid of the space between elements in a row in a html page?

Question

I'm displaying 3 <img> in a row like this:

<div style="width: 950px">

                <img src='/UploadedImages/86.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/85.jpg' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

                <img src='/UploadedImages/84.gif' alt='' style="width: 300px; margin: 0px; padding: 0px; border: 1px solid Black" />

        </div>

As you can see I have thin black borders around the images. My problem is that there are white spaces about 5px wide between the borders of neighbouring images and I have set the margin to be 0px but it does not work. So what is happening here?

score 16 · Accepted Answer · answered Jan 06 '11 at 16:55

16

You have to remove the whitespaces (linebreaks & spaces) between the tags:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><img src='/UploadedImages/85.jpg' alt='' style="..." />

or make comments to keep linebreaks:

<img src='/UploadedImages/86.jpg' alt='' style="..." /><!--

--><img src='/UploadedImages/85.jpg' alt='' style="..." />

answered Jan 06 '11 at 16:55

Floern

33,559
24
104
119

1

+1 The space is caused because the browser intercepts the tab/return between them to be a space. – Evan Mulawski Jan 06 '11 at 16:56
This breaks very easily depending on the IDE you are using, I would recommend a more solid solution. – jeroen Jan 06 '11 at 17:00

score 7 · Answer 2 · answered Jan 06 '11 at 16:54

An img is an inline element (sort of...) so spaces and new-lines are displayed in your div. To avoid that you can float the images but then you would have to add an overflow to the container as well:

div {
  overflow: hidden;
}
div img {
  float: left;
}

The overflow on the container is needed so that the container encapsulates the images. Otherwise it will collapse.

score 2 · Answer 3 · answered Dec 29 '16 at 12:16

You can get rid of the gaps by setting the font-size on the container to zero ;

CSS

.imgContainer { 
    font-size: 0px ; 
    white-space: nowrap; 
}

HTML

<div class="imgContainer">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

score 1 · Answer 4 · answered Jan 06 '11 at 20:22

Wrap images in an ul and float the li:

<div style="width: 950px">
 <ul>
  <li><img src='/UploadedImages/86.jpg' alt='' /></li>
  <li><img src='/UploadedImages/85.jpg' alt='' /></li>
  <li><img src='/UploadedImages/84.jpg' alt='' /></li>
 </ul>
</div>

and then we add display:block; to img css:

 ul li {
 float:left;
 display:inline;
 list-style:none;
 }
 ul li img {
 border: 1px solid #000;
 display:block;
 padding: 0;
 width: 300px;
 }

jFiddle demo

How do I get rid of the space between elements in a row in a html page?

4 Answers4

Linked