5px added to div height when I insert img tag?

I have a div with no height. When I put an image into the div whose height is 750px my div takes on a height of 755px. I have checked all the styles, but there is no style which dictates this height. I have a reset style sheet to zero-out browser styling. I'm not sure where the extra 5px is coming from.

any ideas?

Thanks, Mike H.

 

Can you provide a workin url or the html and css? Would be much easier to help.

 

no, working in local server. sorry

 

In that case, you should make up and post a minimal test case. If you've never done that, it's a basic html page with only enough marked up content, css, and javascript (if needed) to illustrate the issue — and not more. Don't forget to attach the actual image file you're using.

It may be that by making the minimal test case, you will find the culprit yourself. In that case, be sure to post your solution.

cheers,

gary

 

Did you try it with different browsers?

If you use chrome right click inspect element, you may be able to determine the cause.

 

Are you using an IMG tag? If so images are a 'special case' cousin to inline-block behavior, and as such end up padded based on the line-height to x-height alignment. That 5px is likely the difference between the font baseline and the complete line-height alignment.

Confused? GOOD. Basically IMG tags align like text elements in relation to other text, and that alignment is screwing you up. The solution? Either set the image to block behavior (display:block; or float), or set 'vertical-align:top;" on it so that it aligns to the top of the line-height instead of the bottom of the x-height. "vertical-align:bottom;" can also work in some cases, but not always.

Dimes to dollars that's what's going wrong for you.

 

It's not very elegant, but you can force the image to align as you like using markup similar to

<img style="float:left; width: 280px; height: 210px; margin-top: 0px; 
margin-right: 0px; margin-bottom: 0px; margin-left: 0px;" 
src="someimage.jpg"alt="alt text" />

HTML:

Adjust the float, height, width and margin parameters as needed. You can use positive or negative i.e.-5px for the margins to position an image.

 

thanks, i set img to display: block and that took care of the problem.

thanks again, mike h.

 

Sorry I didn't catch that myself; must have had a brain fart. It is usually described as a gap under the image, and is as deathshadow described. Setting the image's display property to block is one fix. Keep in mind it is not foolproof. See That mysterious gap under images.

cheers,

gary

 

Can you please send me that css file to check?

 

[quote="kk5st, post: 18784150, member: 18103"Setting the image's display property to block is one fix. Keep in mind it is not foolproof.[/quote]
Uhm... display:block is foolproof -- it's just not always the desired behavior... just as float with it's block-level behavior is foolproof too... just not always the desired behavior.

... in what usage case would either of those break? (that link you provided doesn't seem to provide anything useful about it...)

 

I'm afraid I can't send any css or html to look at as I am constantly revising it to try to achieve a certain effect. I think for my purposes using display:block is probably going to work out. Thanks to all who gave my question some consideration. I really appreciate the help.

Thanks, Mike H.

 

Uhm... display:block is foolproof -- it's just not always the desired behavior... just as float with it's block-level behavior is foolproof too... just not always the desired behavior.

... in what usage case would either of those break? (that link you provided doesn't seem to provide anything useful about it...)[/quote]If a solution works, but does not work as expected or desired, it is not foolproof. As to use cases, I clearly stated issues involved for block and float methods.

g