inline 요소는 컨텐츠의 너비만큼 크기를 가져서 줄바꿈이 일어나지 않기 때문에 가로 배열이 됩니다. 하지만, margin, padding을 0으로 설정해도 두 요소 사이 공백이 존재하는 경우가 있습니다.
inline과 inline-block 요소의 특성
-
inline요소inline요소는 텍스트의 한 부분처럼 취급됩니다. 따라서 한 줄에 연속해서 배치되며, 줄을 넘어가지 않는 한 옆에 다른inline요소가 바로 붙습니다.- 예시:
<a>,<span>,<em>,<strong>등이 있습니다.
-
inline-block요소inline-block요소는inline요소처럼 한 줄에 배치되지만, 자체적으로 높이와 너비를 가질 수 있다는 점에서 차이가 있습니다.- 블록처럼 영역을 가지면서도, 다른
inline요소처럼 한 줄에 배치되는 특성을 가지고 있습니다.
공백이 발생하는 이유
HTML에서는 코드상에서 inline이나 inline-block 요소 사이에 공백(스페이스, 탭, 줄바꿈 등)이 있으면 이 공백이 화면에 그대로 반영됩니다. 이는 HTML 렌더링 엔진이 공백 문자들을 공백으로 인식하기 때문에 발생합니다. 즉, HTML 코드에서 다음과 같은 코드가 있을 때,
<div>
<span style="display: inline-block;">Box 1</span>
<span style="display: inline-block;">Box 2</span>
</div>Box 1과 Box 2사이에 있는 공백이 그대로 렌더링됩니다. 그 결과 두 요소 사이에 간격이 생기게 됩니다.
공백 문제 해결 방법
1. 부모 요소에 font-size: 0; 적용하기
부모 요소에 font-size: 0; 스타일을 지정하면 공백이 사라집니다. 이 방식은 공백을 발생시키는 원인인 텍스트 사이즈를 0으로 만들어 공백이 화면에 표시되지 않도록 하는 원리입니다.
<div style="font-size: 0;">
<span style="display: inline-block; width: 100px; height: 50px; background-color: red;"></span>
<span style="display: inline-block; width: 100px; height: 50px; background-color: blue;"></span>
</div>주의
font-size: 0;을 설정하면 자식 요소에 텍스트가 있을 경우 보이지 않기 때문에, 자식 요소들에 별도로 font-size를 지정해 주어야 합니다.
2. flex 레이아웃을 사용하기
부모 요소에 display: flex;를 적용하면 inline-block 요소를 사용할 때 발생하는 공백 문제를 쉽게 해결할 수 있습니다. flex 레이아웃에서는 요소들 사이에 불필요한 공백이 자동으로 제거되므로, 간격을 원하는 대로 설정할 수 있습니다.
<div style="display: flex;">
<span style="width: 100px; height: 50px; background-color: red;"></span>
<span style="width: 100px; height: 50px; background-color: blue;"></span>
</div>flex 레이아웃을 적용하면 공백 문제뿐 아니라 요소 간 간격을 gap 속성으로 쉽게 제어할 수 있어 레이아웃 관리가 수월해집니다.
