img 마우스 오버시 테두리 안쪽으로 주기

html

<a href="#" class="innerborder"><img src="http://placehold.it/200x200"></a>

css

img {vertical-align: top;} /*4px gab을 위한 처리*/

.innerborder {float: left; overflow: hidden;}

.innerborder:hover img {margin:-5px;}

.innerborder:hover {border:5px solid blue;}

1. img요소만큼 공간값을 가지기위해 float 지정.

2. img에 margin을 -5px을 줌으로써 img를 감싼 a요소의 크기가 상하좌우 -5px씩 줄어듬

3. a요소에 overflow:hidden을 주어 img 넘치는 부분을 가림.

4. 줄어든 5px만큼 border값을 지정

내부요소에 마진값을 주면 감싼 요소는 그 마진값을 포함하여 넓이를 갖게된다.

당근 음수마진값을 주면 외부요소는 음수마진 만큼 넓이가 줄어든다.

왜 이걸 이해를 못해서 하루죙일 고민을 했을가?