Inline Images Increase Line Spacing

[bianca_writer]

The guide I'm working on includes icons throughout paragraphs; for example: "Click the <icon image> to open the menu". I was able to add these images and control the size via CSS. However, adding the images increases the line spacing. How can I fix this and ensure that the inline images do not affect line spacing (or at least try to keep the original line spacing as much as possible)?

Screen shot of example:

Screen Shot 2016-12-02 at 1.33.32 PM.png

Code for the image tag:

Code: Select all

	img.Inline 
	{
	clear: both;
	float: none;
	width: auto;
	height: 10pt;
	}

[Nita Beck]

I might be wrong, but I don't think the clear and float attributes are doing anything.

The "hack" I've done to better align the inline images is to give the img style a negative bottom margin, something like "margin-bottom: -4px". This nudges the images down a little bit so that they don't spawn the unwanted space above the lines they sit in.

Anyone got a more elegant solution?

[bianca_writer]

Hi Nita,

Thanks for the pointers! I deleted the float and clear attributes, and set a margin-bottom attribute. The margin didn't completely fix the wonky line spacing, but it helped a little.

Thanks!

[KayJay]

My solution is not working seamlessly yet, but might help with a few ideas. I've been using em instead of pt to define the image height, so that their height is defined relative to the line height. Also, you might want to play around with the vertical-align property.

Here's what my current CSS looks like:

Code: Select all

img.inline {
	vertical-align: baseline;
	max-height: 2em;
	padding: 0px;
	width: auto;
}

[Psider]

Part of it will be the height of the images - if they are "taller" that the line height of just text then they will bump out the line height to fit. I haven't played much with max-height on, but it's possible that will help, but may also distort your images.

The other common thing is if you have margin and/or padding on your image tag, then this can add extra space too. For example:

img {
margin-top: 10px;
padding-left: 12px;
}

You might have to follow KayJay's example and create a separate style that you apply to inline images where you set margin and padding to zero, or remove the margin and padding for the img tag and create a separate style to images that you do want to have margin and padding on.

HTH