Question

我写了html代码，但我遇到了问题。我添加了一个图像链接，但这个图像有一个填充。所以现在填充是链接和图像的一部分。我可以对此做些什么，以便只链接图像吗？

    <!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>

我很感激能帮助我的人。

`

Answer 1

首先，不要将像“p”这样的块元素放入像“a”这样的内联元素中。为什么不在“p”标签中加上“a”标签？使用保证金而不是填充。

这是我的结果：

[...]
    <style type=text/css>
        .design {background-color: orange; margin: 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>
 [...]
    <p class="centered"> 

        <a href="http://upload.wikimedia.org/wikipedia/commons/8/83/Neugierige-Katze.JPG" class="design"><img style="align: center" src="Neugierige-Katze.jpg" alt="tolle Katze" width="500" height="325"></a>

    </p>

   [...]

对我有用

修改：好的，保证金也是可能的。只需删除跨度并将边距放到图像上即可。

Answer 2

填充被视为元素的一部分。如果您不想要此行为，请改用margin。

Answer 3

一种方法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>

填充是链接的一部分

3 个答案: