인라인, 인라인 블럭요소 사이의 빈 공간 제거하기

Fighting the Space Between Inline Block Elements

이 포스팅에서는 인라인 블럭 요소사이에 생겨나는 빈 공백을 제거하는 방법에 대해 알아보도록 합니다.

일반적으로 인라인 요소(블럭요소를 인라인요소로 변경 포함)를 다음과 같은 스타일을 적용한다고 가정해봅니다.

html

<nav>
	<a href="#">One</a>
	<a href="#">Two</a>
	<a href="#">Three</a>
</nav>

css

nav a {
	display: inline-block;
	padding: 5px;
	background: red;
	color: white;
}

Will result in:

See the Pen 인라인 블럭 빈공간 데모 by jaeheekim (@jaehee) on CodePen.

예를 들어 디자인상에서 버튼이 촘촘하게 붙어 있다거나 또는 li 요소를 탭으로 사용하는데 인라인 처리를 했다거나 하는 경우에 사용자가 원하지 않는 결과가 나타날 것입니다.

사실 위와 같은 현상은 버그가 아닙니다.

이는 한 라인 선상에서 요소를 설정하는 방법일 뿐입니다.

이러한 빈 공간이 생기는 이유는 코드상의 line break(개행), tabs counts 등으로 인한 빈 노드가 자리를 차지하고 있는 것입니다.

이러한 빈 노드에 대한 공간을 제거하는 데에 여러 방법이 존재합니다.

Remove the spaces

html

<ul>
	<li>
	one</li><li>
	two</li><li>
	three</li>
</ul>

또는,

html

<ul>
	<li>one</li
	><li>two</li
	><li>three</li>
</ul>

또는 주석을 함께 사용하면

html

<ul>
	<li>one</li><!--
	--><li>two</li><!--
	--><li>three</li>
</ul>

위와 같은 방법은 흥미(?)로울 수도 있지만 코드 가독성에서 좋아 보이지 않으며 협업을 하는 환경에서 위험할 수 있습니다.

단지 위 방법을 사용하면 빈 노드를 생기지 않는다는 것을 보여준 것입니다.

Negative margin(음수 마진)

css

nav a {
	display: inline-block;
	margin-right: -4px;
}

위와 같이 음수 마진을 사용하면 해결이 간단하지만 오래된 브라우저인 IE(6 & 7) 에서는 문제가 발생할 여지가 있으니 주의하기 바랍니다.

만약 IE(6 & 7)을 고려하지 않는다면 좀더 깔끔한 코드를 사용할 수 있습니다.

Skip the closing tag

html

<ul>
	<li>one
	<li>two
	<li>three
</ul>

HTML5 에서는 닫는 태그를 생략하더라도 오류를 발생하지 않기 때문에 위와 같이 생략하여 사용할 수도 있습니다.

하지만 이 코드에 대한 의도를 모르는 경우 그리고 엄격한 문법 검사에서도 문제가 발생할 여지가 있습니다.

Set the font size to zero(폰트 사이즈를 0 으로 설정하기)

css

nav {
	font-size: 0;
		}
	nav a {
	font-size: 16px;
}

위 방법은 컨테이닝 박스에 font-size: 0; 을 정의하고 빈 공백이 생기지 않기지 않도록 하기 위한 요소에는 다시 폰트사이즈를 재정의하여 사용할 수 있습니다.

inline-table & table-cell

css

nav {
	display: inline-table;
}
nav a {
	display: table-cell;
}

위 방법은 요소를 테이블 셀과 같이 만드는 방법입니다.

이 또한 디지안에 따라 선택적으로 사용할 수 있습니다.

지금까지 알아본 방법 이외에도 가장 많이 이용하는 float 이나 flexbox 를 이용하면 해결할 수 있습니다.

사용자 기호(?)에 따라 선택적으로 사용하시기 바랍니다.

Source Overview

See the Pen inline-block 빈 공백 제거하기 by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub