<div style="color: #eeffff; background-color: #263238; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #89ddff;">.</span><span style="color: #ffcb6b;">event</span>&nbsp;<span style="color: #89ddff;">.</span><span style="color: #ffcb6b;">btn</span>&nbsp;<span style="color: #ffcb6b;">a</span>&nbsp;<span style="color: #89ddff;">{</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">display</span><span style="color: #89ddff;">:</span>&nbsp;block<span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">width</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">450px</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #b2ccd6;">height</span><span style="color: #89ddff;">:</span>&nbsp;<span style="color: #f78c6c;">45px</span><span style="color: #89ddff;">;</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #89ddff;">}</span></div>
<div><span style="color: #89ddff;">이와 같이 작성된 부분에서 inline-block은 쓰면 그림의 링크위에</span></div>
<div><span style="color: #89ddff;">영역이 없어지고 block으로 해야 나오는데 이유가 inline-block은</span></div>
<div><span style="color: #89ddff;">inline의 특징을 갖고 있어서 a의 링크로 적은곳까지만 영역이 되기때문인거죠?</span></div>
</div>

<p>inline-block 은 블록의 특성이 있어서 크기 지정이 가능하고, 인라인 특성도 있어서 텍스트 처럼 줄이 바뀌지 않고 나열되는 특징이 있습니다.</p>
<p>예제에서는 position: absolute 안에 포함 되어 있어서 block 처리 해야만 정확한 박스형태가 구현이 됩니다.<br />대체로 본문의 텍스트에 포함 된 버튼은 inline-block 으로 처리하고, 메뉴나 예제 같은 버튼의 경우는 block 처리하면 문제가 없을 것 같습니다.</p>

인프런 커뮤니티 질문&답변

.event .btn a {} 부분에서 질문이 있습니다.