Flexbox puts image at top but text-links at bottom - html

Question

I got a project where I put a flex menu on top of a picture slider. I want the items to use the same baseline, but I cannot set it to be on the same line.
a img{
height: 40px;
}
.links{
display: flex;
align-items: baseline;
}
<div class="links">
<a class="img-link"> <img src="anypicture.jpg"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
https://jsfiddle.net/7xnesjpy/13/
The container of the picture is slightly above the container of the text-links, what can I do to set them to the same ground/baseline

Answer 1

When you use baseline, it is the img's bottom that will line up with the bottom of the text, as you can see here, where I added a border to the items.
a img{
height: 40px;
border: 1px solid blue;
}
.links{
display: flex;
align-items: baseline;
}
.links a + a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
For the img to align with the text/link elements bottom, you need flex-end.
a img{
height: 40px;
border: 1px solid red;
}
.links{
display: flex;
align-items: flex-end;
}
.links a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>
But as you can see in the 2nd sample, there is still a gap below the img.
This gap all inline element has, and to get rid of that, change the img's display type to block.
a img{
display: block;
height: 40px;
border: 1px solid red;
}
.links{
display: flex;
align-items: flex-end;
}
.links a + a {
border: 1px solid blue;
}
<div class="links">
<a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
</div>

Answer 2

Your image has a lot of transparent space around it, but you can fix it by adding
margin to you a img{} like so:
a img{
height: 40px;
margin-bottom:-20px;
}
.links{
display: flex;
align-items: baseline;
}

Answer 3

Your CSS is working fine but the problem is the image. There is unwanted space in your image. Please see in the fiddle now.

Answer 4

Removing all Padding and Margin from the image fixes it.
a img {margin: 0; padding: 0;}
https://jsfiddle.net/7xnesjpy/27/