Unusual gaps between divs, and anchor tag bug - html

Question

I am attempting to attach a div on the bottom on my image with no spaces. However, the following code does not do what I ask of it. In addition to this, when hovering anywhere along the width of my div h2, the click button occurs, to indicate it is clickable in this blank space. I feel I have attempted everything to attach the black div and the image together, and make them both clickable without glitching or bugging with only one anchor tag. If you can help me, I would be extremely greatful.
Here is my current HTML code:
<div style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
Thanks in advance!

Answer 1

Use this rule, it is caused by initial margin of h2
<div style="max-width: 280px; overflow:hidden;" style="#">
<a style="max-width: 280px;" href="#">
<img src="../Images/7.JPG" style="height: 200px; width: 280px; border-radius: 10px 10px 0 0; display: block;">
<div style="background-color: black; width: 280px; height: 30px; border-radius: 0 0 10px 10px;">
<h2 style="color: white; margin:0px; font-weight: bold; text-align: center; padding-top: 2px;">Bees</h2>
</div>
</a>
</div>
here is a fiddle for you

Answer 2

There are a few things at play here.
Your <h2> is overflowing trough the parent because of collapsible margins. Set the margin to 0 to fix it.
Either the <a> or the main <div> needs display:inline-block to not go 100% width.
Finally, don't use inline styles. Use <style> tag or style.css and add some classes and IDs.
a{
max-width: 280px;
display: inline-block;
}
img{
height: 200px;
width: 280px;
border-radius: 10px 10px 0 0;
display: block;
}
h2{
color: white;
font-weight: bold;
text-align: center;
padding-top: 2px;
margin: 0;
}
a div{
background-color: black;
width: 280px;
height: 30px;
border-radius: 0 0 10px 10px;
}
<div>
<a href="#">
<img src="https://placeimg.com/280/200/any">
<div>
<h2>Bees</h2>
</div>
</a>
</div>