a 태그 사이 공백 제거하는 방법

 

 

---

▒ a 태그 사이 공백 제거하는 방법 <a href=""></a>

코딩을 하다보면 <a>태그와 다음 <a>태그 사이에 margin, padding값이 없는대도  1px정도의 공백이 생기는 경우가 있다.

 

<style>
.test a {display:inline-block;}
</style>
 
<ul class="test">
  <a href="#">탭메뉴1</a>
  <a href="#">탭메뉴2</a>
  <a href="#">탭메뉴3</a>
  <a href="#">탭메뉴4</a>
</ul>
 

 

공백이생기는 a태그

 

 

 

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

 

<ul class="test">
  <a href="#">탭메뉴1</a><a href="#">탭메뉴2</a><a href="#">탭메뉴3</a><a href="#">탭메뉴4</a>
</ul>
 

그러면 해결방법은?

<style>
.test {font-size:0;}
.img {font-size:0;}
 
.test a, .img a {display:inline-block;}
</style>
 
<ul class="test">
  <a href="#">탭메뉴1</a>
  <a href="#">탭메뉴2</a>
  <a href="#">탭메뉴3</a>
  <a href="#">탭메뉴4</a>
</ul>
 
 
<div class="img">
  <a href="#"><img src="../이미지.jpg"></a>
  <a href="#"><img src="../이미지.jpg"></a>
</div>
 

 

위와 같이 a태그의  부모요소에 font-size:0 을 해주면된다.

그러면 공백없이 잘 붙어서 나온다.

 

 

font-size:0으로 해결되는 공백