image 17x13 pixel is not vertically even with text next to it.

kadin
kadin used Ask the Experts™
on
Why is my green image always a little higher than my text on the same line? I try changing margin and padding but can't get them to be at the same level. I tried putting them in separate spans, but I still have the same problem. Has someone been where I am? Thanks.

.image {padding:4px 0px 0px 0px; line-height:15px; margin-top:5px; display:inline-block;}
.text {background-color:rgb(0,0,0); height:14px;  padding:0 4px 2px 4px; margin-bottom:5px;
	color:#000000; font-size:11px; line-height:15px; display:inline-block;}

<span class="image"><img src="image.jpg" border="0" /></span>
<span class="text">some text</span>

Open in new window


some text
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
QPR

Commented:
You have differing padding and margins for the spans.
Try stripping away all css and then adding them back in one by one until you find the culprit.

You have created 2 containers and then padded them differently

Author

Commented:
Thanks for your response.
I removed padding, margin, lineheight, height. It is still the same. I am using firebug and I notice when I run my mouse over the span that contains the image, the span area highlights blue and it is larger than the image itself. There is a space about 4 pixels under the image, meaning the span does not wrap the image tight to the image border. There is a gap below the image.
Commented:
See if this thread is any help
http://www.webmasterworld.com/css/3444785.htm

Author

Commented:
Thanks for that. Display-block removed that space. It took me a moment to realize display-block on the <img> itself and not the <span> that contains the image.

Thanks again.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial