체크박스와 라벨
체크박스(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;
}