CSS 강좌 | Tips > 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 맞지 않는 경우가 발생할 수 있습니다.

높이를 세밀하게 맞추는 방법 중의 하나는 position 속성을 이용하는 것입니다.

position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다.

checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다.

예제

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      input[id="b"] {
        position: relative;
        top: 5px;
      }
      label[for="c"] {
        position: relative;
        top: 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>

Category

Created on 2016-11-23 15:22 | Updated on 2017-07-03 08:58

이 글을 공유하기

Kakao