跨度邊框不包裹圖像

我想使用跨度來包裝圖像，但是當在跨度中應用邊框時，邊框會被裁剪。這是爲什麼發生？跨度邊框不包裹圖像

<span id="imagem"> 
    <img src="http://www.greentechmedia.com/content/images/articles/google-utility.jpg"/> 
</span> 

span{ 
    border: 5px solid black; 
    cursor:pointer; 
}

來源

2014-10-19 Maigret

'span'默認是'inline'。將其更改爲'inline-block' /'block'。浮動的元素也將工作，但前者的選擇會更好 - http://jsfiddle.net/yepj17nm/ – 2014-10-19 02:29:32

好吧，但你看到光標：指針實際上工作在整個圖像？它是否應該像邊框一樣被裁剪？ – Maigret 2014-10-19 02:33:35

跨度元件是內嵌元素。因此，要看到它與子元素更好的互動，給跨度以下屬性之一：

display:inline-block (probably this) 
display:block

來源

2014-10-19 02:29:32 webfish

一個span是inline元素和div是block元素。改爲使用div。

試試這個 JSFiddle

來源

2014-10-19 02:30:18

您可以在答案中包含代碼演示。事實上，你甚至不需要jsfiddle最近添加的堆棧片段。 – Daedalus 2014-10-19 02:31:51

使用div似乎是更好的選擇，但你可以使用display:inline-block。

inline-block有助於在特定寬度和高度內很好地包裹某個特定元素。以前這是通過float實現的。

<span id="imagem"> 
    <img src="http://www.greentechmedia.com/content/images/articles/google-utility.jpg"/> 
</span> 

span{ 
    border: 5px solid black; 
    cursor:pointer; 
    display:inline-block; 
}

來源

2014-10-19 02:37:25 SamDJava

跨度邊框不包裹圖像

回答

相關問題