跨度边框未包装图像

Question

我尝试使用跨度包装图像，但是当在跨度中应用边框时，边框会被剪裁。为什么会这样？

http://jsfiddle.net/c743yeLt/1/

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

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

Answer 1

span元素是内联元素。因此，为了更好地与子元素进行交互，请为span提供以下属性之一：

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

Answer 2

使用div似乎是更好的选择，但您可以使用display:inline-block。

inline-block有助于在特定的宽度和高度内很好地包装特定元素。早期曾经通过浮点数来实现。

<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;
}

Answer 3

span是inline元素，div是block元素。请改用div。

试试这个 JSFiddle