Simple question: I need an image to appear in the middle of a paragraph of text, however, the image is slightly larger than the height of each line of the font, so it pushes open a horizontal "gap" in the text to make room for itself. To fix this, I could:
1) Shrink the image, so that it is not larger than the font. 2) Use Position:Absolute
But I don't want to shrink it any further, it is small enough already to "technically fit" between each line of text, except that it would need to use up a few pixels of the white area above and below the line of text it is in.
And I can't use position:absolute, because then the image's position would be in the top left corner of the window, instead of in the paragraph where I want it.
I thought perhaps I could put a dummy "placeholder" image of size 1 pixels into the paragraph. Then, use Position:Absolute on my real image, and continually set my real image to be at the same location where the dummy image is. I haven't researched to see if that is possible, but it seems a bit excessive for such a simple thing. Is there an easier way?
EDIT: I found that adding: margin:-20px; to the image's style works!!!
margin:-20px;
JSFiddle example: http://jsfiddle.net/j7tLX/3/