CODEWITHSUNDEEP
htmlcss
Canna
Canna

Reputation: 3794

Why is there a gap between the img tags?

html

<div id="home_header_minitab">
                    <img src="topnavi_1.gif" />
                    <img src="topnavi_2.gif" />
                    <img src="topnavi_3.gif" />
                    <img src="topnavi_4.gif" />

</div>

css

#home_header_minitab{
    width: 100%;
    float: right;
    text-align: right;
}

and the result,

enter image description here

If i delete float and text-align, it prints fine. but if i add that two, it shows like that. but the requirement is to locate the images to the right side. :(

If I'm wrong, I'll appreciate if there is a better way to print images straight forward.

Upvotes: 0

Views: 239

Answers (2)

poke
poke

Reputation: 387687

Unless otherwise specified, whitespace in HTML is usually collapsed into a single space. So in your code there is actually a space between the images.

Now, because img tags are inline elements, they are part of the normal text flow and as such will appear as if they are text elements themselves—separated by a space. That space will be rendered as a normal space with its normal size between the images which is why you see it.

There are usually two ways to solve this without replacing the inline layout by your own (e.g. using floats). The first way is to simply get rid of any whitespace between the elements in HTML. This is the easiest and most effective solution.

The other solution would be to change the font size to zero, so the space actually has no size itself:

#home_header_minitab {
    font-size: 0;
}

Note that you need to be careful here in case you want to actually display text, or if you want a fallback to the alternative image titles.

Upvotes: 2

Quentin
Quentin

Reputation: 943561

Replaced inline elements are treated in the same way as characters.

There is a space between <img> <img> for the same reason that there is a space between a a.

Remove the whitespace between the elements from the HTML.

Upvotes: 4

Related Questions