CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기
체크박스와 라벨
체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.
예제
다음은 높이를 조정하는 간단한 예제입니다.
- 첫 번째 체크박스와 라벨은 아무런 조정을 하지 않은 것입니다. 체크박스가 라벨보다 조금 위에 있습니다.
- 두 번째 체크박스와 라벨은 체크박스를 1.5px 밑으로 내려서 높이를 맞추었습니다.
- 세 번째 체크박스와 라벨은 라벨을 1.5px 위로 올려서 높이를 맞추었습니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input[id="b"] { position: relative; top: 1.5px; } label[for="c"] { position: relative; top: -1.5px; } </style> </head> <body> <p><input type="checkbox" id="a"> <label for="a">LOREM</label></p> <p><input type="checkbox" id="b"> <label for="b">LOREM</label></p> <p><input type="checkbox" id="c"> <label for="c">LOREM</label></p> </body> </html>