CODEWITHSUNDEEP
css
EducateYourself
EducateYourself

Reputation: 979

css cannot delete spaces between images

I have 9 images inside one div. There are spaces between lines (please see the image below). I need to delete them. Could you please help me.

<div style="margin:0;padding:0;border:0;">
                <img src=".../1.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../2.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../3.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../4.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../5.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../6.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../7.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../8.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../9.jpg" style="margin:0;padding:0;border:0;">
</div>

Update:

enter image description here

Upvotes: 0

Views: 88

Answers (4)

Arbel
Arbel

Reputation: 30999

There are many ways, but one very quick way in your case, since the container div doesn't have any text in it, is to do this:

div { /* your inline images container div with no text */
    font-size: 0;
}

This will make the existing white space between your inline img elements not occupy any space in the rendered layout.

But even if you are going to have text inside this div, simply restore the text size for the elements containing the text, e.g. for a span inside this div:

div span {
    font-size: 16px;
}

Upvotes: 2

ratherblue
ratherblue

Reputation: 2108

You need to make the images either on one line:

<div>
   <img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg">
</div>

Or use an html comment:

<div>
   <img src="img1.jpg"><!--
--><img src="img2.jpg"><!--
--><img src="img3.jpg"><!--
--><img src="img4.jpg"><!--
</div>

Upvotes: 1

Pablo Rincon
Pablo Rincon

Reputation: 1039

Are you having images stock on top of each other ? Usually there is a 3px margin between them. Setting their styling to display:block fixes this.

Upvotes: 0

Marc B
Marc B

Reputation: 360702

You've got your images on separate lines. The linebreak chars ARE treated by browsers as whitespace, e.g.

<img>[linebreak char here]
<img>

is rendered as

<img> <img>
     ^---- linebreak converted to space

If you want them against each other exactly, you'll have to eliminate the whitespace:

<img><img><img>...
     ^--no space at all

Upvotes: 3

Related Questions