Question

In a <div> there are two <span>. One pulls in an image of a QR code from

http://chart.apis.google.com

The other <span> next to it is just text with a link to download the QR. The designer had envisioned that the DOWNLOAD link would align to the bottom of the image, the challenge is that the image has an unknown border. I understand that this will mean some trial and error to get it visually right.

I tried adding padding and margins but then it sends both <span> a bit higher. I added a red outline for visual reference

.qr_image { position:left; outline: 1px solid red ; }
.qr_download { color: #1d8cd2; text-decoration: underline; outline: 1px solid red; }

Answer 1

By default an image will align with a text on the bottom border in the HTML specs.

<span><img src="http://img_url" /></span>
<span>text</span>

Should produce an image with a piece of text to its immediate right with bottom aligned. Isn’t this what you wanted?

Since I cannot see your example, I’m assuming that you are talking about having a CSS border on the image? So

<span><img src="http://img_url" style="border: 4px solid black" /></span>
<span>text</span>

But the text would still be aligned to the bottom of the image with the border. If this is not what you are asking, could you give a more specific example?