html - 如何使标签边框环绕图像

Question

我需要将边框应用于 a 标签，但是当我这样做时，边框不会环绕图像，我该如何实现？

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

CSS:

a{
  border: 5px solid blue;
}

https://jsfiddle.net/b7qdcub1/

Answer 1

如果你想了解为什么 anchor 标签不取其包含元素的高度和宽度 Read This Answer .我使用的不是边框属性 css outline .

注意:有很多技术可以解决这个问题。像为 img 元素设置边框或在 anchor 标记上设置显示内联 block 。检查这个Fiddle更多解决方案

div a{
outline:5px solid blue;
}
div a img{
 vertical-align:bottom; /* Need this to clear white-space */

}

<div>
 <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>