CODEWITHSUNDEEP
cssborderpaddingcss-float
Snowy Coder Girl
Snowy Coder Girl

Reputation: 5518

Floating Elements Span Adding Space

I have something like the following code:

<div style="border:2px black solid;overflow:hidden;">
    <span style="float:right;">
        <img src="sprintlogo.png" alt="Test Image 1" />
    </span>
    <img src="sprintlogo.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

For some reason, the bottom border around the <div> is not flush with the images, etc. For example, we get things like this:

Example

It's not an issue with the images or anything (i.e. there is no whitespace in the image file).

By adding background-color:blue; to the <span>'s style attribute, we can see that the span seems to be taking up extra space.

Example 2

I tried messing with the span's margin and padding to no avail. Does anyone have an idea of what is going on?

Upvotes: 2

Views: 1410

Answers (1)

Tomas Reimers
Tomas Reimers

Reputation: 3292

Very strange indeed.

I found that by removing the span and simply floating the image right it removes the extraspace. Indicating the issue was in the span.

Then I looked at firebug and found that the extra space was rendered height.

Apparently the space is being creating by a stray character (which is odd because the character is still there if you remove whitespace...), as demonstrated here where I turn font-size to 0 and the space goes away.

Edit

Yeah the issue is most definitely that the image is being positioned assuming there is text and aligning it with the imagarinary text (veritcal-align:baseline;) another fix would be to align the image with the bottom of this text here.

Upvotes: 4

Related Questions