我的链接图片有不可见的像素，我想通过编码删除[关闭]

Question

My image link has "invisible pixels" that show up as a link when you hover above the actual image. Is there any way to remove them? Here is my code:

<div id="sidebar">
    <div id="navbuttonbox">

        <a href="Movies.php"><img src="img/test.png"/></a>

    </div>
</div><!--sidebar-->

For the style I use

#navbuttonbox {
    margin-left: 37px;
}

So that It will be right where I want it.

I demonstrated it on JSFIDDLE https://jsfiddle.net/1g2pqwy2/1/

When you move your mouse a little bit above the image you still get a cursor link because the tail of the image is higher then the body.

Answer 1

First here is your HTML.

<div id="sidebar">
    <div id="navbuttonbox">
        <a href="Movies.php"><img src="img/test.png"></a>
    </div>
</div>

Try this:

HTML

<div id="sidebar">
    <div class="navbuttonbox">
    <a href="Movies.php">Movies</a>
    </div>
    <div class="navbuttonbox">
    <a href="OTHER.PHP">OTHER</a>
    </div> <!--- KEEP REPEATING FOR EACH MENU ITEM //-->
</div>

CSS

.navbuttonbox {
  position:relative;
  background: url(/img/test.png);
  background-repeat: no-repeat;
  min-height: 40px;
  padding-top: 10px;
  margin-right: -38px;
}

.navbuttonbox > a {
  display:block;
  padding:10px;
}

You'll notice the link is shifted down for those invisible pixels. The tail can be fixed too if you need it with:

.navbuttonbox > a:before {
  content:'';
  width:38px;
  top:-10px;
  bottom:0;
  right:0;
  position:absolute;
}

To demonstrate I set up a JSFiddle: here