체크박스(checkbox)와 라벨(label) 높이 조정하기 > html

체크박스와 라벨

체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.

예제

다음은 높이를 조정하는 간단한 예제입니다.

• 첫 번째 체크박스와 라벨은 아무런 조정을 하지 않은 것입니다. 체크박스가 라벨보다 조금 위에 있습니다.
• 두 번째 체크박스와 라벨은 체크박스를 1.5px 밑으로 내려서 높이를 맞추었습니다.
• 세 번째 체크박스와 라벨은 라벨을 1.5px 위로 올려서 높이를 맞추었습니다.

<style>
input[id="b"] {position:relative; top:1.5px;}
label[for="c"] {position:relative; top:-1.5px;}
</style>

<p><input type="checkbox" id="a"> <label for="a">TEST</label></p>
<p><input type="checkbox" id="b"> <label for="b">TEST</label></p>
<p><input type="checkbox" id="c"> <label for="c">TEST</label></p>