line-height 및 Vertical-align_HTML/Xhtml_Web 페이지 제작에 대한 포괄적인 이해-HTML 튜토리얼-php.cn

이전 단어

Line-height, Font-Size, Vertical-align은 인라인 요소의 레이아웃을 설정하는 주요 속성입니다. 이 세 가지 속성은 상호 의존적이며 선 사이의 거리 변경, 수직 정렬 설정 등 모두 협력이 필요합니다. 글꼴 크기 관련 내용은 CSS 글꼴에서 자세히 소개했습니다. 이번 글에서는 주로 line-height와 수직 정렬에 대해 소개하겠습니다.

줄 높이

정의

줄 높이는 텍스트 줄의 기준선 사이의 거리를 나타냅니다. Line-height는 실제로 인라인 요소와 기타 인라인 콘텐츠에만 영향을 미치며 블록 수준 요소에 직접 영향을 주지는 않습니다. 블록 수준 요소에 대해 line-height를 설정할 수도 있지만 이 값은 블록 수준 요소의 인라인 콘텐츠에만 적용됩니다. 그래야만 영향을 미칠 수 있습니다. 블록 수준 요소에 line-height를 선언하면 블록 수준 요소 콘텐츠의 최소 줄 상자 높이가 설정됩니다.

값: | |

초기값: 보통

적용 대상: 모든 요소

상속: 예

백분율: 요소의 글꼴 크기 기준

약관 Line-Height를 깊이 이해하려면 Line Box 구성에 대한 일반적인 용어를 이해해야 합니다.

컨텐츠 영역

대체되지 않은 인라인 요소 또는 익명 텍스트의 일부의 경우 글꼴 크기 및 글꼴 모음이 콘텐츠 영역의 높이를 결정합니다. 송나라의 경우 인라인 요소의 글꼴 크기가 15px이고 다른 글꼴의 경우 콘텐츠 영역의 높이가 글꼴 크기와 동일하지 않습니다.

인라인 박스

콘텐츠 영역에 줄 간격을 더한 값은 인라인 상자와 같습니다. 대체되지 않은 인라인 요소의 글꼴 크기가 15px이고 줄 높이가 21px인 경우 차이는 6px입니다. 사용자 에이전트는 이 6개의 픽셀을 반으로 나누고 그 중 절반을 콘텐츠 영역의 상단과 하단에 적용하여 인라인 상자를 만듭니다.

line-height가 글꼴 크기보다 작은 경우 인라인 상자는 실제로 콘텐츠 영역보다 작습니다.

라인박스

라인 박스는 라인의 가장 높은 인라인 박스 상단과 가장 낮은 인라인 박스 하단 사이의 거리로 정의되며, 각 라인 박스의 상단은 이전 라인 박스의 하단 옆에 있습니다. 라인

상자 속성

패딩, 여백 및 테두리는 줄 상자의 높이에 영향을 주지 않습니다. 즉, 줄 높이에 영향을 주지 않습니다.

인라인 요소의 테두리 경계는 줄 높이 대신 글꼴 크기로 제어됩니다

대체되지 않은 인라인 요소의 상단과 하단에는 여백이 적용되지 않습니다.

Margin-left, padding-left 및 border-left는 요소의 시작 부분에 적용되고 margin-right, padding-right 및 border-right는 요소의 끝 부분에 적용됩니다.

요소 교체 인라인 대체 요소는 세로로 정렬할 때 요소가 올바르게 배치될 수 있도록 줄 높이 값을 사용해야 합니다. 수직 정렬의 백분율 값은 요소의 줄 높이를 기준으로 계산되기 때문입니다. 수직 정렬의 경우 이미지 자체의 높이는 중요하지 않으며 line-height 값이 핵심입니다

기본적으로 인라인 대체 요소는 기준선에 배치됩니다. 교체된 요소에 하단 패딩, 여백 또는 테두리를 추가하면 콘텐츠 영역이 위로 이동합니다. 대체된 요소의 기준선은 일반 대열의 마지막 라인 상자의 기준선입니다. 대체 요소의 내용이 비어 있거나 오버플로 속성 값이 표시되지 않는 한, 이 경우 기준선은 여백의 아래쪽 가장자리입니다

세로 정렬

정의

Vertical-align은 수직 정렬을 설정하는 데 사용됩니다. 수직으로 정렬된 모든 요소는 줄 높이에 영향을 미칩니다.

값: 기준 | 상위 | 텍스트 하위 |

초기값: 기준

적용 대상: 인라인 요소, 대체 요소, 표 셀

상속: 없음

백분율: 요소의 줄 높이 기준

[참고] IE7-browser의 수직 정렬 백분율 값은 소수점 줄 높이를 지원하지 않으며 기준선, 중간, 텍스트 하단 등의 값을 취할 때 표시 효과가 다릅니다. 표준 브라우저의 일반적인 솔루션은 인라인 요소에 대해 Set display:inline-block

입니다.

CSS 코드

클립보드에 콘텐츠 복사

vertical-align:baselinebaseline(요소의 기준선은 상위 요소의 기준선과 정렬됩니다. )
vertical-align:sub(요소의 기준선을 상위 요소의 적절한 아래 첨자 위치로 낮춥니다. 요소)
vertical-align:super (요소의 기준선을 상위 요소의 적절한 위 첨자 위치로 올립니다)
vertical-align:bottombottom(정렬된 하위 항목의 아래쪽 정렬 요소 끝은 줄 상자의 하단과 정렬됩니다.)
vertical-align:text-bottom(요소의 하단을 상위 요소의 하단과 정렬 요소의 콘텐츠 영역이 끝 정렬됨)
vertical-align:top(정렬된 하위 요소의 상단을 줄의 상단과 정렬 상자)
vertical-align:text-top(요소의 상단을 상위 요소의 상단과 정렬 요소의 콘텐츠 영역 )
vertical-align:middle(요소의 중간점과 상위 요소의 기준선에 1을 더한 값 /2 상위 요소의 문자 X 높이 정렬)
vertical-align:(-n)px(요소는 기준선을 기준으로 npx만큼 위아래로 오프셋됩니다.)
vertical-align:x%(요소의 line-height 값에 비례)
vertical-align:inherit(상위 요소에서 vertical-align 속성 값 상속)

[참고]_{및 ^{기본적으로 수직 정렬:sub/super}}

스타일을 사용합니다.

인라인 블록 하단 공백

인라인 블록 요소는 이미지의 기본 세로 정렬이 기준선 정렬이므로 블록 수준 요소에 간격을 둡니다. (원칙적으로 이미지의 아래쪽 가장자리는 대문자 영문자 X의 아래쪽 가장자리에 정렬됩니다.) 익명 텍스트); 익명 텍스트에는 선 높이가 있으므로 X의 아래쪽 가장자리는 선 프레임에서 일정 거리만큼 떨어져 있습니다. 이 거리는 이미지가 남긴 간격입니다.

따라서 이 문제를 해결하기 위한 몇 가지 솔루션이 있습니다

[1]디스플레이:블록

수직 정렬은 교체된 요소와 인라인 요소에만 적용할 수 있으므로 블록 수준 요소로 변경하면 수직 정렬이 무효화됩니다

[2] 상위 줄 높이: 0

이는 익명의 텍스트와 줄 상자 사이의 거리를 0으로 만듭니다

　[3]세로 정렬: 위쪽/가운데/아래

신청

【1】한 줄의 텍스트가 가로 및 세로 중앙에 배치됩니다.

XML/HTML 코드클립보드에 콘텐츠 복사

div{
줄 높이: 100px
너비: 100px
텍스트 정렬: 가운데
테두리: 1px 단색 검정색
}
div>텍스트 테스트div>

[참고] 텍스트 한 줄의 세로 중앙 정렬은 높이와 줄 높이를 같은 값으로 설정하는 것을 의미한다고 많이 알려져 있지만 실제로는 높이를 설정할 필요가 없습니다. 줄 높이만 설정하면 텍스트 자체가 줄의 수직 중앙에 표시됩니다.

【2】이미지가 대략 수직 중앙에 위치합니다

XML/HTML 코드클립보드에 콘텐츠 복사

div{
줄 높이: 200px
텍스트 정렬: 가운데
}
img{
수직 정렬: 가운데
}
div>
img src="line-height 및 Vertical-align_HTML/Xhtml_Web 페이지 제작에 대한 포괄적인 이해" alt="line-height 및 Vertical-align_HTML/Xhtml_Web 페이지 제작에 대한 포괄적인 이해">
div>