链接包括空的空间

Question

我在下面的例子外一个div像一个链接：

<a href="http://google.com"> 
    <div id="Something" style="width:200px; height:100px; display:block; background-color:red; padding:0; margin:0;"> 
    </div> 
</a> 

现在，链接不上格的任何部分的工作，但它也存在外div，主要在它没有任何东西的右侧。我如何解决这个问题，使链接只能在div标签内工作？

下面是的jsfiddle代码：http://jsfiddle.net/BWPHS/

Answer 1

注意，DIV元素display: block默认情况下，所以你并不需要，在DIV。你需要做的是使A高度相同，并解决填充和边缘的味道。

<div id="Something" style="width:200px; height:100px; background-color:red; padding:0; margin:0;"> 
    <a href="http://google.com" style="height: 100px; display:block; padding: 0; margin: 0;"></a> 
</div> 

http://jsfiddle.net/BWPHS/3/

注意，如sdleihssirc笔记，HTML5不会允许它（如果使用DOCTYPE）。请注意，以解决对HTML5的具体问题，你就需要在高度和宽度适用于A标签：

<a href="http://google.com" style="width: 200px; height: 100px; display:block; padding: 0; margin: 0; background: blue;"> 
    <div id="Something" style="height: 100px; background-color: red; padding:0; margin:0;"></div> 
</a> 

http://jsfiddle.net/BWPHS/2/

而且，作为thirtydot指出，可以display: inline-block或float: left的#something元素和应用display: block到A，它应该完全为你工作：

#something, 
#something a { 
    padding: 0; 
    margin: 0; 
} 
#something { 
    display: inline-block; 
    background: red; 
} 
#something a:link { 
    display: block; 
    width: 200px; 
    height: 100px; 
} 

<div id="something"> 
    <a href="http://google.com"></a> 
</div> 

http://jsfiddle.net/BWPHS/6/

而且您可能要尽量避免使用内联style属性。