체크박스와 라벨(label) 글자 높이 조절 방법
체크박스와 라벨
체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는
경우가 발생합니다. 높이를 조정하는 방법은 position 속성을 이용하는 것입니다.
position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다.
checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.
예제
- 다음은 높이를 조정하는 간단한 예제입니다.
- 첫 번째는 아무런 조정을 하지 않은 것입니다.
- 두 번째는 체크박스를 16px 위로 올렸습니다.
- 세 번째는 라벨을 32px 밑으로 내렸습니다.
<p>
<input type="checkbox" id="checkbox-a">
<label for="label-a">LOREM</label>
</p>
<p>
<input type="checkbox" id="checkbox-b">
<label for="label-b">LOREM</label>
</p>
<p>
<input type="checkbox" id="checkbox-c">
<label for="label-c">LOREM</label>
</p>input[id="checkbox-b"] {
position: relative;
top: 0;
}
input[id="checkbox-b"] {
position: relative;
top: -16px;
}
label[for="label-c"] {
position: relative;
top: -32px;
}data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="CSS 체크박스와 라벨(label) 높이 조정하기"
data-slug-hash="xxOKzYZ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.