New2HTML New2HTML - 7 months ago 11
HTML Question

Padding is part of a link

I wrote html-code and I've got a problem. I added a link to an image, but this image has got a padding. So now the padding is part of the link as well as the image. Can I do something about it, so that only the image is linked ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Just testing</title>
<style type=text/css>
.design {background-color: orange; padding: 50px; border: thick double red; margin: 500}
.design2 {background-color: yellow; padding: 10px 100px; border: thick groove red; margin: 10}
.centered {text-align: center}
#blink {text-decoration: underline overline;;color: red}
</style>
</head>
<body style="background-color: lightgray">
<h1 class="centered design2">This is <span style="color:red">MY</span> site :D:D</h1>
<a href="http://upload.wikimedia.org/wikipedia/commons/8/83/Neugierige-Katze.JPG">
<p class="centered"><img class="design" style="align: center" src="Neugierige-Katze.jpg" alt="tolle Katze" width="500" height="325">
</p>
</a>
<p class="centered">Cat the Cat is <span id="blink"> WATCHING YOU</span>
</p>
<p class="centered">
<audio controls>
<source src="Cat_Meow_2-Cat_Stevens-2034822903.mp3" type="audio/mpeg">
<source src="Cat_Meow_2-Cat_Stevens-2034822903.ogg" type="audio/ogg">

</body>
</html>


I am grateful to anyone who can help me.

`

Answer

One way to do it http://jsbin.com/OdoSIme/1/

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Just testing</title>
      <style type=text/css>
          .design {background-color: orange; padding: 50px; border: thick double red; margin: 500}
          .design2 {background-color: yellow; padding: 10px 100px; border: thick groove red; margin: 10}
          .centered {text-align: center}
          #blink {text-decoration: underline overline;color: red}
      </style>
  </head>
  <body style="background-color: lightgray">
    <h1 class="centered design2">This is <span style="color:red">MY</span> site :D:D</h1>

    <p class="centered design" style="margin:0 auto; display: table;">
      <a href="http://upload.wikimedia.org/wikipedia/commons/8/83/Neugierige-Katze.JPG">
        <img style="align: center" src="http://wallpapersfor.me/wp-content/uploads/2012/02/cute_cat_praying-1280x800.jpg" alt="tolle Katze" width="500" height="325"> 
      </a>
    </p>

    <p class="centered">Cat the Cat is <span id="blink"> WATCHING YOU</span></p>
    <p class="centered">
        <audio controls>
            <source src="Cat_Meow_2-Cat_Stevens-2034822903.mp3" type="audio/mpeg"/>
            <source src="Cat_Meow_2-Cat_Stevens-2034822903.ogg" type="audio/ogg"/>
        </audio>
  </body>