Re: Problem with line spacing when using display:inline

Danny@Kendal wrote:

I have a small <div> element which contains two text blocks - one within
h5> tags and the other within <p> tags.
I don't want any extra line spacing between elements so use the
display:inline property.

Your problem is not block or inline positioning, but browser-default
margin and padding. Add:

margin: 0; padding: 0;

to each element styling and see them come together. Adjust as required -
try putting coloured borders around each element to see the effect.
margin and padding *must* have a unit of measure if non-zero.

Is <h5> really appropriate - do you have <h1>-<h4> defined, or are you
just using <h5> for font sizing? If the latter, don't. Use an
appropriate level and size the fonts to your desire.

Also, don't specify font sizes in px. 10px and 12px are smaller than
most people want to read, and cannot be resized in IE. Specify font
sizes as a percentage, with your main content no smaller than 100% (that
is, what *I* choose to set as my browser default).


--
Mark.
http://tranchant.plus.com/

"Mark Tranchant" <mark (AT) tranchant (DOT) plus.com> wrote

Danny@Kendal wrote:

I have a small <div> element which contains two text blocks - one within
h5> tags and the other within <p> tags.
I don't want any extra line spacing between elements so use the
display:inline property.

Your problem is not block or inline positioning, but browser-default
margin and padding. Add:

margin: 0; padding: 0;

to each element styling and see them come together. Adjust as required -
try putting coloured borders around each element to see the effect.
margin and padding *must* have a unit of measure if non-zero.

Thanks.
Had to remove the "display:inline" and <br> before the margin setting had
any effect on vertical spacing.

Thanks for the tips of font settings too.