CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

inline 또는 inline-block 요소 사이의 작은 틈은 margin이 아니라 HTML 태그 사이의 공백·줄바꿈이 화면의 공백으로 처리되어 생긴 것일 수 있습니다. 이 경우 margin을 0으로 해도 틈이 남습니다. 요소를 한 줄로 배치하는 UI라면 Flexbox의 gap으로 간격을 관리하거나, inline-block을 유지해야 할 때 태그 사이 공백을 제거하는 방법을 사용할 수 있습니다.

여백이 margin인지 공백 문자인지 확인하기

인라인 요소는 문장 속 단어처럼 한 줄에 참여합니다. 예를 들어 <span>HTML</span> <span>CSS</span>의 두 태그 사이 공백은 단어 사이 간격으로 남습니다. 소스 코드의 들여쓰기와 줄바꿈도 일반적인 white-space: normal 처리에서 공백으로 합쳐질 수 있습니다. inline-block 역시 바깥쪽에서는 인라인 배치에 참여하므로 같은 현상이 생깁니다.

개발자 도구에서 두 요소의 margin이 0인지 먼저 보고, 닫는 태그와 다음 여는 태그 사이의 텍스트 노드를 확인하세요. 간격의 크기는 글꼴·글자 크기·공백 처리 규칙에 따라 달라지므로 “언제나 4px”이라고 가정하지 않는 것이 좋습니다. padding은 요소의 테두리 안쪽 공간이며, 요소 바깥에 놓이는 이 공백과는 구분해야 합니다.

전체 예제: 네 가지 배치 비교하기

다음 코드를 inline-space.html로 저장하고 브라우저에서 엽니다. 모든 li의 margin을 0으로 지정한 상태에서 기본 공백, 태그를 붙인 경우, Flexbox gap, 글자 크기 0 방법을 비교합니다. 외부 파일은 필요하지 않습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>inline-block 사이의 공백 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    .demo { margin: 0; padding: 0; list-style: none; max-width: 650px; }
    .demo li { display: inline-block; width: 80px; margin: 0; padding: 8px;
      border: 1px solid #7692ae; background: #edf3fa; vertical-align: top; }
    .flex { display: flex; flex-wrap: wrap; gap: 12px; }
    .zero { font-size: 0; }
    .zero li { font-size: 16px; }
  </style>
</head>
<body>
<h1>요소 사이 공백의 차이</h1>
<h2>원본 줄바꿈이 있는 경우</h2>
<ul class="demo normal">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
<h2>태그 사이 공백을 없앤 경우</h2>
<ul class="demo tight"><li>HTML</li><li>CSS</li><li>JS</li></ul>
<h2>Flexbox와 gap을 쓴 경우</h2>
<ul class="demo flex">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
<h2>부모 글자 크기를 0으로 한 경우</h2>
<ul class="demo zero">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
</body>
</html>

첫 목록은 li 사이에 작은 틈이 남고, 두 번째 목록은 테두리가 맞닿습니다. 세 번째는 HTML 줄바꿈과 관계없이 gap으로 지정한 12px 간격이 생깁니다. 마지막 목록은 부모의 공백 글자 폭이 0이 되어 틈이 없어지지만 li의 글자는 16px로 복원되어 읽을 수 있습니다.

간격을 직접 관리할 때 선택할 방법

메뉴·태그·버튼처럼 독립된 항목을 배치한다면 예제의 flex 목록처럼 부모에 display: flex와 gap을 지정하는 방식이 명확합니다. gap을 12px에서 20px로 바꾸면 항목 사이만 넓어지고 항목 바깥 양끝에는 같은 gap이 추가되지 않습니다. flex-wrap: wrap은 한 줄 공간이 부족할 때 다음 줄로 보내며, 줄 사이에도 같은 gap이 적용됩니다.

기존 inline-block 구조를 유지해야 하면 두 번째 목록처럼 닫는 태그와 다음 여는 태그를 붙일 수 있습니다. 전체 HTML 문서의 모든 공백을 삭제하라는 뜻은 아닙니다. 문장 속 단어 사이의 의미 있는 띄어쓰기는 유지하고, 붙여야 할 항목 사이만 조절하세요. 템플릿이나 포매터가 다시 줄바꿈을 넣으면 간격이 돌아올 수 있으므로 생성된 HTML도 확인합니다.

부모의 font-size: 0도 사용할 수 있지만 자식 글자 크기를 명시적으로 복원해야 합니다. 복원을 빠뜨리면 글자가 사라지고, 부모 글자 크기에 의존하는 em 길이에도 영향을 줄 수 있습니다. 예제의 zero li 규칙을 잠시 제거해 글자가 사라지는지 본 뒤 바로 되돌리면 이 조건을 확인할 수 있습니다. 새 레이아웃에서는 이런 복원 조건이 없는 Flexbox가 더 간단할 수 있습니다.

음수 margin과 다른 종류의 틈 주의하기

작은 틈을 상쇄하려고 margin-right: -4px처럼 고정 음수 값을 넣으면 특정 글꼴에서는 맞아도 다른 환경에서 겹치거나 틈이 남을 수 있습니다. 공백 처리 문제를 임의의 숫자로 가리는 방식보다 실제 원인과 필요한 항목 간격을 분리해서 정하세요. float로 바꾸는 것도 단순한 공백 제거 이상의 배치 변화를 일으키므로 이 문제만을 위한 기본 해결책으로 삼을 필요는 없습니다.

요소 안의 글자와 테두리 사이가 넓다면 padding을, 목록 전체가 들여쓰기되어 있다면 ul의 기본 padding을 확인합니다. 일반적인 비대체 inline 요소의 width·height나 위아래 margin은 블록 상자와 같은 방식으로 적용되지 않습니다. 크기와 상하 간격을 가진 독립 상자가 필요하면 inline-block 또는 Flexbox 항목으로 배치하는 편이 의도를 표현하기 쉽습니다.

공백 노드와 배치 해결 방법은 MDN의 공백 처리 안내, 공백 합치기 규칙은 W3C의 CSS 텍스트 공백 처리 정의에서 확인할 수 있습니다.

CSS