Why are my images positioned further down the page as size increases?

Question

Hello,
I'm experiencing a problem with images that I'm a little baffled about.
My image tag is listed as below and comes below text in other plain paragraph tags.
<p><img id="p_image" height="411 width=312 source={src} styleName="image"/></p>
The image is not appearing.  If I decrease the height to 50 it appears (obviously skewed though) and is positioned below the text.
If I increase the height to 300 it appears but now the top of the image is further below the text.
If I set the height to 411 it doesn't appear I assume because the combination of the image height as well as the increased space between the top of the image and the preceding paragraph puts it off the page.
Why does the space below the paragraph increase as the image height increases?
Images attached.
Any help is appreciated.
Thanks, peter

Answer 1

I think the effect you are seeing is a result of how the lineHeight is set up. By default, the lineHeight will be calculated as 120% of the size of the largest thing on the line -- in your case, this is the inline graphic. This is designed to leave space between the line before and the line with the graphic. So it is taking the height of the graphic, multiplying by 120%, and making this the distance between the previous line and the line with the graphic. So the bigger the graphic, the bigger the space above the graphic. Normally this works well with text, but in this case you may want to get closer to "set solid". You can do this by setting the lineHeight to 100%. Or you may wish to leave a couple of percent for the descenders of the previous line. Or, another alternative that may work well for you if you really know exactly where you want the line set, you could measure the graphic, add on the number of extra pixels to leave for the descenders, and make the lineHeight a constant. So you could do something like this:
<img lineHeight="104%" height="411"/>
or this:
<img lineHeight="423" height="411"/>
Obviously you would still need to specify the source and any other parameters you want on the image.
Note that if you are trying to fit a 200 pixel high graphic into a 200 pixel high container, you will hit the same problem -- in order to fit the graphic, the container will have to be slightly bigger than the graphic in order to fit the descenders on the last line. This is true even if the last line contains only the graphic, and no descenders (or text) at all.
Hope this helps,
- robin