Hi, I'm designing a website mockup with Inkscape. I would like to insert some text and I want this text displaying exactly as the future HTML/CSS I will code (especially about the "line-height" property and the position of the text within the line). I played with the text tool but I don't understood what the dashed rectangle that sorrounds the text when you click it is and how its (strange) position and dimensions are calculated. Can you help me? I don't know if you understood exactly
what I mean, feel free to ask me about it. Thanks. Antonio.

Hi Antonio,
I don't know how I ever missed your message, which was posted originally so very long ago. Probably you have already figured this out. But just in case, I thought I'd answer, and also apologize that it didn't get answered in a timely manner.

The dashed line rectangle is called a bounding box. It's simply an indication that the object, or text in this case, is selected, and also a visual representation of the object's dimensions. I do know what you mean about it being strange on selected text, but I can't explain it.

the text dialog box (not the text tool) shows that you can set line height in percentages. Whether or not this relates to line-height in CSS i don't know. it would also be useful if you could set it in points, pixels, etc.
the time is nigh when your svg mockup will display natively in a browser...where you can apply CSS to svg directly.
and then one fine day the svg will no longer be a mockup but the actual code.

You can certainly use the line-height property from the Inkscape Text dialog in your css like this:
Suppose you have set a line-height of 140% for some text in Inkscape (for example for all paragraphs), then in your css you can use

Note that I'm not using units here, and this is totally fine.
Or you can use

See more information about the subtle difference between the two approaches here: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/