如何使标签边框环绕图像

Question

I need the border to be applied to the a tag but when I do this the border doesn't wrap around the image how can I make this happen?

<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

You have to apply display: block to your a tag so that it behaves as a block level element. Also give it a fixed width and a height to encompass the image inside it.

Refer code:

 a { border: 5px solid blue; display: block; width: 720px; height: 720px; } 

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

Answer 2

I'm guessing you are trying to clip image to its bounds. Try this

a{
border: 5px solid blue;
overflow: hidden;
}

Answer 3

    a{
  border: 5px solid blue;
  display:inline-block;
}

Answer 4

If you want to know about Why anchor tag does not take height and width of its containing element Read This Answer . Instead of border property I'm using css outline .

NB: There are lots of technique you can solve this this. like Set the border for img element or set display inline-block on anchor tag. Check this Fiddle for more solution

 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> 

Answer 5

Just put a border on the div.

 div { border:solid;} 

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