span태그에서 빈 공백 없애기

<span> 태그는 inline속성이다. 원래라면 빈 공백 없이 바로 같은 줄에 나와야 한다. 그런데 마크업을 하다보면 빈공백이 생길 경우가 있다.

<span>a</span>
<span>b</span>
<span>c</span>


그 이유는 바로 줄바꿈 때문이다. span태그가 줄 바꿈을 공백으로 인식해서 공백만큼 패딩이 적용되는 것이다. 이를 해결하려면 어떻게 해야 할까?

원래라면 그냥 붙여 쓰면 해결이다.

<span>a</span><span>b</span><span>c</span>

하지만 코드 가독성 또는 마크업상의 여러 이유들로 다른 줄에 써야 할 경우가 생긴다. 그럴 경우 아래와 같은 방법을 쓰면 된다

상위 엘리먼트의 font-size를 0으로 만든다.

공백의 글자크기를 0으로 만들면 된다. 이 예제에서는 상위엘리먼트가 body이므로 아래와 같이 설정해주면 된다. 단 이 방법은 span속성에 말줄임 처리가 들어가야 할 경우 제대로 동작하지 않는다.

body {font-size: 0px;}
span {font-size: 20px;}

html주석을 쓴다.

또 한가지 깔끔한 방법은 html 주석을 쓰면 된다. 이렇게 하면 공백을 없앨 수 있다. 개인적으로 가장 좋은 방법이라 생각한다.

<span>a</span><!--
--><span>b</span><!--
--><span>c</span>

그 외 방법

span 태그에 - 값으로 마진을 주거나 span태그를 도중에 끊어서 줄을 띄우고 닫거나 하는 방법들이 있지만 권장하고 싶은 방법은 아니다.

Comments

comments powered by Disqus
comments powered by Disqus