I've created a jsfiddle for this and the sample HTML and CSS is below.
I've removed the margins, the padding, and I've set everything to display inline, yet I can't get each anchor to sit side by side.
I've tried all that I would expect to work, but CSS often doesn't do what I expect.
Any help or insight with this will be much appreciated.
The HTML:
<dl>
<a href="#">
<dt>One</dt>
<dd><img src="//imageshack.us/a/img22/2964/puppies4.jpg" height='100' width='100' /></dd>
</a>
<a href="#">
<dt>Two</dt>
<dd><img src='//imageshack.us/a/img519/5132/im20cagnolininu8.jpg' width='100' height='100' /></dd>
</a>
</dl>
The CSS:
dl {
border: 1px solid yellow;
a {
border: 1px solid green;
display: inline;
margin: 0;
padding: 0;
dt,dd { margin: 0; padding: 0; display: inline;}
}
}