Home
CSS
CSS 실전 예제

체크박스와 라벨(label) 글자 높이 조절 방법

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 position 속성을 이용하는 것입니다. 예제 position 속성의 값을 relative로 정한 후 top 속성의 값

체크박스와 라벨

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

Post a Comment