爲什麼我的圖像鏈接的空白空間可點擊？

我正在爲朋友建立一個網站，他的規範的一部分是圖像應該包含鏈接以更高的分辨率查看圖像。我把家裏的圖像放在一個div內的錨點上，但我無法弄清楚爲什麼我的圖像的邊緣空間是可點擊的。爲什麼我的圖像鏈接的空白空間可點擊？

我假設它必須處理div內的圖像？

這裏是我的jfiddle：http://jsfiddle.net/9kSL3/5/

這裏有感興趣的領域：

<div id="home"> 
<a href="./images/home3.jpg"><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a> 
</div> 



#home img{ 
    width: 60%; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    /*border-radius: 15px; 
    border: 1px;*/ 
}

有什麼奇怪，我就是在這樣的回答：Remove space around clickable image答案，而不是使用填充

保證金

來源

2014-02-07 user2464083

這是因爲你有一個img使用display: block內部a標籤，這是內聯。

移動width: 60%和margin: 0 auto;到a標籤與display: block，並添加width: 100%到img

例子：http://jsfiddle.net/9kSL3/6/

來源

2014-02-07 00:45:59

工作完美，謝謝 – user2464083

同樣的問題給我。我不知道圖像的寬度。所以這個解決方案不起作用。任何幫助？ – Stanly

發佈一個新問題 –

這是因爲你已經設置爲顯示爲一個塊級元素的圖像（我假設你做這是爲了居中）。如果刪除display: block線，並添加一個章節來#home DIV像這樣： #home { text-align: center; }

它應該爲你工作和利潤率將不會是「點擊」

來源

2014-02-07 00:58:01 nagyben

我也喜歡這個答案，我只是發現第一個更多的信息，爲什麼顯示：塊做了它做了什麼 – user2464083

我通過設置解決了這個問題親本 div的<a>元素到text-align: center和<img>到display: inline。

.parent-div-of-your-a-tag { 
    text-align: center; 

} 

.your-img-class-name { 
    width: 100%;  // might not be necessary, I needed them for responsive design 
    height: auto; // see above 
    display: inline; // necessary 
}

來源

2016-08-12 21:04:51

爲什麼我的圖像鏈接的空白空間可點擊？

回答

相關問題