填充是链接的一部分答案

【问题标题】：Padding is part of a link填充是链接的一部分
【发布时间】：2013-10-13 11:06:12
【问题描述】：

我编写了 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>

感谢任何可以帮助我的人。

【问题讨论】：

标签： html css image hyperlink padding

【解决方案1】：

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

【讨论】：

这对我来说很好，但是属性 : style="margin:0 auto; display: table, 实际上代表什么？
这是一种居中的方式，因为我给了它design 类。否则它会在左侧
margin 属性中的 auto 值有何不同？为什么你使用值 0 ？
margin: 0 auto 是 margin-top:0; margin-right: auto; margin-bottom:0; margin-left:auto; 或 margin: 0 auto 0 auto 的简写。它删除垂直边距并将元素水平放置在完美的中心

【解决方案2】：

首先不要将像“p”这样的块元素放入像“a”这样的内联元素中。为什么不把“a”标签放在“p”标签里呢？使用边距而不是填充。

这是我的结果：

[...]
    <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>

   [...]

对我有好处

edit：好的，margin也是可以的。只需删除跨度并为图像添加边距。

【讨论】：

【解决方案3】：

填充被认为是元素的一部分。如果您不希望这种行为，请改用边距。

【讨论】：