라인 높이, 글꼴 크기 및 세로-균형은 선 내에서 요소 레이아웃을 설정하는 핵심 속성입니다. 이 세 가지 속성은 상호 의존적 인 관계이며 행 사이의 거리를 변경하고 수직 정렬 설정에는 공동 노력이 필요합니다. 글꼴 크기의 관련 내용은 CSS 글꼴로 자세히 도입되었습니다. 이 기사는 주로 라인 높이 및 수직 균형을 소개합니다.
라인 높이 정의선 높이는 텍스트 라인의 기준선 사이의 거리를 나타냅니다. Line-Height는 실제로 인라인 요소 및 기타 인라인 컨텐츠에만 영향을 미치며 블록 레벨 요소에 직접적인 영향을 미치지 않습니다. 블록 레벨 요소에 대해 Line-Height를 설정할 수도 있지만이 값은 블록 레벨 요소의 인라인 컨텐츠에 적용될 때만 영향을 미칩니다. 블록 레벨 요소에서 라인 높이를 선언하면 블록 레벨 요소의 내용에 대한 최소 선 상자 높이가 설정됩니다.
값 : <길이> | <백분율> | <번호> | 정상 | 상속
초기 가치 : 정상
적용 : 모든 요소
상속 : 그렇습니다
백분율 : 요소에 대한 글꼴 크기
용어라인 높이를 깊이 이해하려면 라인 높이에 대한 일반적인 용어를 이해해야합니다.
콘텐츠 영역비 교체 요소 또는 라인에서 익명 텍스트의 일부의 경우 글꼴 크기 및 글꼴이 콘텐츠 영역의 높이를 결정합니다. 송 글꼴에서 연속 요소의 글꼴 크기가 15px 인 경우 컨텐츠 영역의 높이는 15px입니다. 다른 글꼴에서는 컨텐츠 영역의 높이가 글꼴 크기와 같지 않습니다.
인라인 프레임콘텐츠 영역과 라인 간격은 라인 인라인 상자와 동일합니다. 연속으로 비 교환 요소의 글꼴 크기가 15px이고 라인 높이가 21px 인 경우 차이는 6px입니다. 사용자 에이전트는이 6 픽셀을 2로 나누고 컨텐츠 영역의 상단과 하단에 각각 적용되므로 상자 내부의 선을 제공합니다.
라인 높이가 글꼴 크기보다 작을 때 라인 인라인 상자는 실제로 콘텐츠 영역보다 적습니다.
라인 박스행 상자는 행의 가장 높은 행 내부 상자의 상단과 가장 낮은 행 내부 상자의 하단 사이의 거리로 정의되며 각 행 상자의 상단은 이전 행 상자의 하단 옆에 있습니다.
상자 특성내부 마진, 외부 마진 및 테두리는 라인 프레임의 높이에 영향을 미치지 않습니다. 즉, 라인 높이에 영향을 미치지 않습니다.
인라인 요소의 테두리 경계는 라인 높이 대신 글꼴 크기로 제어됩니다.
여백은 행의 비 교환 요소의 상단과 하단에 적용되지 않습니다.
마진 왼쪽, 왼쪽 패딩 왼쪽, 왼쪽 왼쪽은 요소의 시작 부분에 적용됩니다. 마진 오른쪽, 패딩 오른쪽, 테두리 오른쪽이 요소의 끝에 적용됩니다.
요소를 교체하십시오행 내에서 요소를 교체하려면 수직으로 정렬 될 때 요소를 올바르게 위치시키기 위해 라인 높이 값을 사용해야합니다. 수직-정체의 백분율 값은 요소의 선 높이에 비해 계산되기 때문입니다. 수직 정렬의 경우 이미지 자체의 높이는 관련이 없으며 키는 선 높이의 값입니다.
기본적으로 인라인 교체 요소는 기준선에 있습니다. 내부 마진, 외부 마진 또는 테두리를 교체 요소에 추가하면 컨텐츠 영역이 위로 이동합니다. 교체 요소의 기준은 일반 스트림에서 마지막 행 상자의 기준선입니다. 교체 요소의 내용이 비어 있거나 오버플로 속성 자체의 값이 표시되지 않는 한,이 경우 기준선은 마진 하단 에지입니다.
수직 정렬 정의세로-정렬은 수직 정렬을 설정하는 데 사용되며, 수직 정렬 된 모든 요소는 행 높이에 영향을 미칩니다.
가치 : 기준선 | 서브 | 슈퍼 | 상단 | 텍스트-탑 | 중간 | 하단 | 텍스트 바닥 | <길이> | <백분율> | 상속
초기 가치 : 기준선
적용 : 인라인 요소, 교체 요소, 표 셀
상속 : 없음
백분율 : 요소 라인 높이에 대한 라인 높이
[참고] IE7- 브라우저에서 수직 정체의 백분율 값은 소수점 행 높이를 지원하지 않으며, 디스플레이 효과는 기준선, 중간, 텍스트 바닥 등을 취할 때 표준 브라우저의 효과와 다릅니다.
CSS 코드 복사 컨텐츠를 클립 보드에 복사합니다