css) a태그border 설정시 border가 짧은 이유? a태그 링크 범위 늘리기-display: block; / a태그 영역넓히기

a태그안에 img를 넣고 a태그에 border를 주는데 아래 그림처럼

[html]

<a >

    < img  src="~~" />

    <span aria-label="버튼을 누르세요"> </span>

</a>

 

[css]

a {

border: 1px; solid blue;

 

a, 앵커태그가 생각보다 짧다 

그이유는?

[css]

a {

display: block;

border: 1px; solid blue;

 

 

a태그의 기본 display  속성 때문이다.

display: block;

 설정후 다시 확인하면 

border 가 제대로 보인다.

또 이렇게 해야 span태그도 제대로 포함시킬수 있다.