<a> div 내부의 하이퍼 링크가 대/와이드입니다.

Question

'a'태그가있는 div를 둘러싸는 것은 이상한 결과를 낳습니다. 'a'태그를 내부의 자식 크기 대신 가능한 넓게 만들 필요가 있다고 느낍니다. HTML5와 관련이 있습니다.

Edge는 내가 찾고있는 결과를 어느 정도 제공하지만 Chrome에서 어떤 이유로 'a'태그는 페이지의 전체 너비입니다.

'a'태그 안에 div 'margin'도 포함하고 싶습니다. 그래서 'onclick'메서드를 사용할 수 없습니다. 이것이 자바 스크립트없이 달성 될 수 있습니까? JSFiddle.

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:block;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px; display:inline-block;"><h2>text</h2></div> 
</a> 

<a href="http://example.com" style="background-color: #CCC; display: block;"> 
<div style="width: 100px; height: 100px; background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
</a> 

Answer 1

나는 즉시, 또 다른 "DIV"태그로이 같은 뭔가 ""태그를 둘러싸고있다 찾을 수있는 가장 쉬운 해결 방법 :

<div style="width: 100px"> 
    <a href="http://example.com" style="background-color: #CCC;"> 
     <div style="background-color: #C00; margin: 0px 8px 8px 0px;"><h2>text</h2></div> 
    </a> 
</div> 

을하지만 당신이 "는 원하는 왜 특별한 이유가 "태그가 div 외부에 배치됩니까? div 요소는 올바른 간격을 사용하는 데 사용되며 "a"태그는 본질적으로 하이퍼 링크에 불과합니다. 나는 간단한 예로서 여기에 인라인 CSS를 사용하지만이를 사용하지 않을해야합니다

<div style="background-color: #C00; margin: 0px 8px 8px 0px; width: 100px; height: 100px;"> 
    <a href="http://example.com" style="background-color: #CCC; display: inline-block; width: 100%; height: 100%;"> 
    <h2>text</h2> 
    </a> 
</div> 

PS를 : 그래서 논리적으로 당신은 이런 식으로 이어지는, 사업부 내에서 "A"태그를 배치합니다. CSS 클래스를 대신 사용하십시오. 나중에 고마워 할거야.