채우기는 링크의 일부입니다

나는 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>

나를 도울 수있는 누구에게나 감사드립니다. 모든

출처

2013-10-06 New2HTML

한 가지 방법은 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>

출처

2013-10-07 00:06:07

이 나를 위해 잘 작동하지만, atribute을 무엇을 수행하는 테이블, 실제로 – New2HTML

위해 서이 그렇지 않으면 왼쪽에있을 것입니다. –

마진 속성에서 자동 값을 만드는 데있어 어떤 차이가 있습니까? 왜 값 0을 사용합니까? – New2HTML

먼저 "A"와 같은 인라인 elment에 "P"와 같은 블록 요소를 넣지 마십시오. "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> 

    [...]

나

편집 좋은 작품 : 내 결과입니다

이 좋아, 마진도 가능합니다. 스팬을 제거하고 이미지에 여백을두기 만하면됩니다.

출처

2013-10-07 00:01:21 wernersbacher

패딩은 요소의 일부로 간주됩니다. 이 동작을 원하지 않으면 대신 여백을 사용하십시오. ? 스타일 = "여백 : 0 자동; 디스플레이 :

출처

2013-10-07 00:02:45 Spidey

채우기는 링크의 일부입니다

답변

관련 문제