鏈接包括空的空間

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屬性。