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

현재처럼 간편한 html 구조로 만들다 보니까 a를 어쩔 수 없이 inline-block으로 변경했어요.

그래서 인라인 블록의 경우 아래쪽과 우측에 생기는 폰트 관련 마진이 5픽셀 정도 생깁니다. 

a를 인라인 블록으로 하지 않고 블록으로 사용하면 감으로 주는 padding-bottom: 10px 이렇게 하지 않아도 정확하게 맞을거에요. 그럴려면 a에 display: block을 주면 줄이 바뀌니까 아래처럼 구조로 하셔야 해요. 그리고 .gnb에 display: flex 또는 .gnb li에 float: left로 가로배치해주시면 됩니다.

이번 경우는 html 구조를 간소화한 html 구조라서 조금 야매스러운 부분이 있습니다.

 

<ul class="gnb">

  <li>

    <a href="#none">

       <span>메일</span>

       <span>메일</span>

    </a>

  </li>

 

</ul>