[CSS] a 태그 사이 공백 제거하는 법

 

 

 

 

<nav>
  <a href="/" class="logo">
    <img src="/images/Img_logo.png" alt="logo image" class="logo_img"/>
  </a>
  <div class="login_button">
    <a href="signin.html" target="_blank">
      로그인
    </a>
  </div>
</nav>

 

.logo와 .logo_img 사이에 작은 공백이 생겼다.

 

단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다.

<a href="/" class="logo"><img src="/images/Img_logo.png" alt="logo image" class="logo_img"/></a>

 

따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다.

.logo {
  font-size: 0;
}