How to set line height in a paragraph (line-height not working)

I usualle set line height something like below

<p style="line-height: 12px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius imperdiet
nunc. Donec eu nibh a odio sodales viverra et non purus.
</p>

It works ok.

But if I have an image the line height is the images height.

<p style="line-height: 12px;">
Lorem ipsum dolor sit amet, <img src="test.jpg">. Cras varius imperdiet nunc.
Donec eu nibh a odio sodales viverra et non purus.
</p>

My "test.img" is higher than 12px and causes the line height to expand.

What can I do?

In article <lod2f5t8ofoej6vmjsac16q5gtbh1isoum (AT) 4ax (DOT) com>,
Test <test@.nil.invalid.com> wrote:

I usualle set line height something like below

It is a bad idea for a number of reasons.

p style="line-height: 12px;"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius imperdiet
nunc. Donec eu nibh a odio sodales viverra et non purus.
/p

It works ok.

How can it work if the line height really was 12px but the user ups his

text to 16 or 18px or more?

But if I have an image the line height is the images height.

Just as if you were to stick in a big letter.

p style="line-height: 12px;"
Lorem ipsum dolor sit amet, <img src="test.jpg">. Cras varius imperdiet nunc.
Donec eu nibh a odio sodales viverra et non purus.
/p

My "test.img" is higher than 12px and causes the line height to expand.

What can I do?

If God Himself told you must under no conditions let the image affect
the height of the line, then do this:

<img style="height:8px;src="..." alt="">

Perhaps you might find this helpful:

See the red text on

<http://netweaver.com.au/floatHouse/page2.php>

and maybe even look at

<http://netweaver.com.au/floatHouse/appendices/page6_1.php>

Pictures act like big letters, room is naturally made for them. Perhaps
you need to supply a URL so people can advise how else to construct the
relevant part of your page.

--
dorayme

In article <doraymeRidThis-E956B7.20052804112009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

img style="height:8px;src="..." alt=""

<img style="height:8px" src="..." alt="">

--
dorayme

Test wrote:

I usualle set line height something like below

p style="line-height: 12px;"

Why? What a terrible thing to do. What if my font size is 18 pixels. The
text will overlap. Badly.

The best thing to do with line-height is to ignore that it has ever existed
unless you know exactly what it does. And *never* specify it in pixels.
Something dimensionless like 1.2 or 1.3 is far far better.

But if I have an image the line height is the images height.

Of course. What else did you expect for an inline (replaced) element. It
lives on a line so if it is bigger than the other things on that line then
line height *must* increase. That is how line boxes work.

What can I do?

What do you want to do? Have the text wrap around the image? If so then
explore float. Have the image sit in the middle of the page you can do in,
say, MS Word? Nope.

Test wrote:

p style="line-height: 12px;"

You have been duly flamed for the 12px.

Now please receive some additional flames for posting a CSS question to an
HTML newsgroup.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius
imperdiet nunc. Donec eu nibh a odio sodales viverra et non purus.

As an extra bonus, you receive complimentary flames for using monkey Latin
pseudo-dummy text in a context where it is manifestly a bad test string. For
line height considerations, diacritic marks (as in Å, ç, É for example) as
well as different types of ascenders (as in j and þ in addition to p and g)
matter a lot. You should actually test even with characters with multiple
(stacked) diacritic marks and various special symbols (like telephone
symbols, mathematical symbols, arrows etc.), if you want to be on the safe
side.

Lorem ipsum dolor sit amet, <img src="test.jpg">. Cras varius

Using a photograph as inline image? Strange.

ObHTML: Your HTML markup is invalid and presents a fundamental accessibility
problem.

--
Yucca, http://www.cs.tut.fi/~jkorpela/