체크 박스, 라디오 박스 텍스트와 높이 맞추기
2023. 2. 27. 11:29
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
label {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<h3>성별 선택</h3>
<input type="radio" name="sex" id="male"><label for="male">남성</label><input type="radio" name="sex" id="female"><label for="female">여성</label>
</body>
</html>
라디오 박스의 텍스트 크기를 조절하면 위 이미지처럼 라디오 버튼과 텍스트가 어긋나게 위치하는 것을 볼 수 있다.
이럴 때는 verical-align 속성을 사용해서 위치를 조절할 수 있다.
라디오 버튼, 텍스트 어디든 적용하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
label {
font-size: 12px;
color: #000;
vertical-align: 2px;
}
/* input[type=radio] {
vertical-align: -2px;
} */
</style>
</head>
<body>
<h3>성별 선택</h3>
<input type="radio" name="sex" id="male"><label for="male">남성</label><input type="radio" name="sex" id="female"><label for="female">여성</label>
</body>
</html>
'공부 > HTML과 CSS' 카테고리의 다른 글
| <li>태그를 가로로 배열하기 (0) | 2023.02.28 |
|---|---|
| counter()와 ::before를 이용한 <ol> 꾸미기 (0) | 2023.02.27 |
| 셀렉트 박스에 플레이스 홀더 적용하기 (0) | 2023.02.27 |
| @charset (0) | 2023.02.16 |
| 뷰포트의 이해 (0) | 2023.01.05 |
