CSS 속성 설명: 패딩

1. 패딩과 컨테이너 크기의 관계

블록 가로 요소의 경우: ① 패딩 값이 커지면 확실히 크기에 영향을 미칩니다. ② 너비는 자동이 아니며, 패딩은 크기에 영향을 미칩니다. auto 또는 box-sizing은 border-box이며, 동시에 패딩 값이 이상해지지 않고 크기에 영향을 주지 않습니다.

인라인 수평 요소의 경우: 수평 패딩은 크기에 영향을 미치고, 수직 패딩은 크기에 영향을 미치지 않지만 배경색에는 영향을 미칩니다. 수직 패딩이 너무 커서 상위 컨테이너를 초과하면 scrollHeight에 영향을 미칩니다.

2. 음수 값 및 백분율 값 채우기

음수 값 채우기 정보: 채우기는 어떤 형태의 음수 값도 지원하지 않습니다.

패딩 비율 값 정보: 패딩 비율은 너비를 기준으로 계산됩니다.

　 인라인 가로 요소의 패딩 백분율 값: ① 너비를 기준으로 계산됩니다. ② 기본 높이와 너비 세부 정보가 다릅니다. ③ 패딩이 줄을 바꿉니다.

3. 라벨 요소의 내장 패딩

　ol/ul 목록: ol/li 요소에는 왼쪽 패딩이 내장되어 있지만 단위는 em이 아닌 px입니다. 글꼴 크기가 작으면 간격이 매우 작아집니다. 글꼴 크기가 너무 크면 일련 번호가 컨테이너 밖으로 나옵니다. 약간의 경험: 텍스트 크기가 12-14px인 경우 padding-left 값인 22-25px가 더 적합합니다.

기타 요소: ① 모든 브라우저에는 입력/텍스트 영역 입력 상자에 내장 패딩이 있습니다. ② 모든 브라우저에는 버튼 버튼에 내장 패딩이 있습니다. ③ 일부 브라우저에는 선택 드롭다운에 내장 패딩이 있습니다. , 패딩을 설정할 수 있는 Firefox IE8+; ④ 모든 브라우저 라디오/ 체크박스 단일 체크박스에는 내장 패딩이 없습니다. ⑤ 버튼 버튼 요소의 패딩은 제어하기가 가장 어렵습니다.

　버튼 형태 버튼 패딩:

　이 때문에 우리는 버튼을 만들 때 태그를 사용하여 버튼을 시뮬레이션하는 경우가 많습니다