체크박스(checkbox)와 라벨(label) 높이 조정하는 방법

CSS

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

체크박스와 라벨의 높이를 맞추려면 두 요소를 감싼 label에 display: flex; align-items: center를 적용하고 체크박스의 기본 margin을 정리하는 방법이 간단합니다. 긴 문구가 여러 줄이 되면 전체 문구의 가운데에 맞출지 첫 줄에 맞출지를 먼저 정해야 합니다. 고정된 top 값으로 조금 옮기는 방법은 특정 글꼴·크기에서의 미세 조정에만 제한해서 사용하는 편이 유지하기 쉽습니다.

높이가 어긋나 보이는 이유

기본 체크박스는 브라우저와 운영체제가 그리는 폼 컨트롤이며, 인라인 문구는 글자의 기준선과 줄 높이에 따라 배치됩니다. 글자 모양의 시각적 중심과 CSS 상자의 기하학적 중심도 항상 같지는 않습니다. 같은 1.5px 보정값이 모든 글꼴·글자 크기·확대율에서 맞는다고 가정하지 마세요.

먼저 input의 실제 width·height·margin과 label의 font-size·line-height를 확인합니다. 테마가 입력 요소에 추가한 여백이나 position·transform 규칙이 있는지도 봅니다. Flex 정렬은 이 차이를 정리하는 출발점이며, 실제 보이는 모양은 대상 브라우저에서도 확인해야 합니다.

전체 예제: 한 줄과 여러 줄의 정렬 비교

아래 코드를 checkbox-align.html로 저장해 브라우저에서 엽니다. 외부 파일과 JavaScript는 필요하지 않습니다. 세 체크박스는 같은 20px 크기를 사용하고 문구 길이와 정렬 기준만 달리합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>체크박스와 라벨의 정렬 기준</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    h2 { font-size: 17px; margin: 18px 0 8px; }
    .examples { max-width: 420px; }
    .option { display: flex; gap: 10px; min-height: 44px; padding: 8px;
      border: 1px solid #91a9ba; background: #eff5f8; cursor: pointer; }
    .option input { flex: none; width: 20px; height: 20px;
      margin: 0; font: inherit; accent-color: #176b86; }
    .option span { min-width: 0; line-height: 1.6; }
    .center { align-items: center; }
    .first-line { align-items: flex-start; }
    .first-line input { margin-block-start: calc((1.6em - 20px) / 2); }
    input:focus-visible { outline: 3px solid #b95700; outline-offset: 2px; }
  </style>
</head>
<body>
<h1>체크박스·라벨 높이 맞추기</h1>
<div class="examples">
  <h2>한 줄 문구: 전체 가운데</h2>
  <label class="option center" for="one">
    <input type="checkbox" id="one"><span>알림을 받겠습니다.</span>
  </label>
  <h2>여러 줄 문구: 전체 가운데</h2>
  <label class="option center" for="middle">
    <input type="checkbox" id="middle"><span>새로운 강좌와 실습 자료를 이메일로 받겠습니다. 수신 설정은 나중에 변경할 수 있습니다.</span>
  </label>
  <h2>여러 줄 문구: 첫 줄에 맞춤</h2>
  <label class="option first-line" for="first">
    <input type="checkbox" id="first"><span>새로운 강좌와 실습 자료를 이메일로 받겠습니다. 수신 설정은 나중에 변경할 수 있습니다.</span>
  </label>
</div>
</body>
</html>

첫 항목은 한 줄 문구와 체크박스를 가운데에 맞춥니다. 두 번째는 여러 줄로 된 span 상자 전체의 가운데에, 세 번째는 첫 줄의 가운데에 체크박스를 맞춥니다. 긴 동의 문구에는 첫 줄 정렬이 더 읽기 쉬울 수 있고, 하나의 짧은 선택 항목에는 전체 가운데 정렬이 자연스러울 수 있습니다. 문구의 길이와 실제 화면을 보고 선택하세요.

라벨의 글자를 눌러 선택이 바뀌는지, Tab으로 이동한 뒤 Space로 전환되는지 확인합니다. 화면을 좁혀 문구가 더 많이 줄바꿈되어도 체크박스가 작아지지 않아야 합니다. flex: none은 이 예제의 체크박스 크기를 유지하고, span의 min-width: 0은 남은 공간에 맞춰 문구가 줄바꿈될 수 있게 합니다.

첫 줄 정렬의 계산과 글자 크기 변경

첫 줄 높이는 글자 크기의 1.6배이고 체크박스는 20px입니다. 두 높이 차이의 절반을 위쪽 여백으로 주면 첫 줄의 중심에 놓입니다. 기본 16px 글자에서는 줄 높이가 25.6px이므로 계산상 위쪽 여백은 2.8px입니다. input에 font: inherit를 지정해 em 계산이 라벨의 글자 크기를 따르도록 했습니다.

글자 크기만 20px로 바꾸면 줄 높이는 32px, 계산된 여백은 6px이 되어야 합니다. .examples에 font-size: 20px를 추가해 첫 줄 정렬이 유지되는지 확인한 뒤 제거하세요. 체크박스 크기를 24px로 바꾸는 실습에서는 width·height뿐 아니라 calc 안의 20px도 24px로 함께 바꿔야 합니다. 확인 후 세 값을 원래대로 복원합니다.

이 계산은 예제처럼 일정한 줄 높이와 체크박스 크기를 사용하는 조건에 맞춘 것입니다. 문구 안에 더 큰 글자·이미지가 섞여 첫 줄 상자의 높이가 달라지면 그 조건까지 확인해야 합니다. 정렬 목적으로 라벨을 비우거나 실제 input을 숨길 필요는 없습니다.

기존 인라인 배치의 vertical-align과 top 보정

Flex로 바꾸기 어려운 인라인 배치라면 input과 label에 vertical-align: middle을 적용하는 방법도 검토할 수 있습니다. middle은 부모의 글자 기준선과 x-height를 사용하는 인라인 정렬이므로, 부모 상자 높이의 정가운데를 뜻하지 않습니다. Flex 아이템에 vertical-align을 추가해 교차축 정렬을 바꾸려고 해서는 안 됩니다.

기존 디자인을 아주 조금 옮겨야 할 때는 아래처럼 position: relative와 top을 쓸 수 있습니다. 위 전체 예제의 label에는 적용하지 말고, 기존 인라인 체크박스에 해당 클래스가 있는 경우의 별도 보정으로 사용하세요.

.legacy-checkbox {
  position: relative;
  top: 1.5px;
}

양수 top은 화면에서 아래로, 음수는 위로 옮기지만 원래 차지하던 자리의 배치까지 다시 계산하지는 않습니다. 1.5px은 보편적인 정답이 아닙니다. 보정 전후를 같은 글꼴·크기에서 비교하고, 값이 맞지 않으면 선언을 제거해 기본 위치로 되돌리세요. 체크박스 모양 자체를 바꾸려면 체크박스 꾸미기 예제를 함께 참고할 수 있습니다.

정렬 기준은 MDN align-items와 vertical-align 문서, 입력 요소와 문구의 연결은 label 문서에서 확인할 수 있습니다.

CSS