CSS의 줄 높이는 무엇입니까

青灯夜游
풀어 주다: 2023-01-05 16:11:42
원래의
4530명이 탐색했습니다.

줄 높이에는 콘텐츠 영역과 콘텐츠 영역을 기준으로 대칭적으로 확장된 빈 영역이 포함되며 일반적으로 인접한 텍스트 줄의 기준선 사이의 수직 거리로도 간주될 수 있습니다. CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. 이 속성은 줄 사이의 거리(줄 높이)를 설정하며 음수 값은 허용되지 않습니다.

CSS의 줄 높이는 무엇입니까

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. 기준선, 하단선, 상단선

CSS의 줄 높이는 무엇입니까

  • 줄 높이에는 일반적으로 콘텐츠 영역을 기준으로 대칭적으로 확장되는 공백 영역이 포함됩니다. 인접한 텍스트 줄의 기준선 사이의 공간 수직 거리.
  • 기준은 한자의 아랫변이 아닌 영문자 "x"

2. 줄 간격, 줄 높이

行距和CSS의 줄 높이는 무엇입니까

3.

밑줄과 윗줄로 둘러싸인 영역은 현실에서는 보이지 않을 수도 있지만 존재합니다. CSS의 줄 높이는 무엇입니까

  • 4. 인라인 상자

인라인 상자는 개념일 뿐 표시할 수는 없지만 존재합니다. CSS의 줄 높이는 무엇입니까

높이는 줄 높이입니다
  • 다른 요소의 영향을 받지 않습니다(패딩). 이때 인라인 박스는 콘텐츠 영역
  • 5.라인 박스

라인 박스(line box)와 동일합니다. 인라인 상자와 유사하게 라인 상자는 이 라인의 가상 직사각형 상자를 나타냅니다. 라인 상자의 높이는 라인 높이에 대한 요소의 영향을 받는 모든 요소의 최대 라인 높이와 같습니다. em,strong,span 등과 같은 인라인 요소의 경우 패딩, 여백, border-top, border-bottom은 행 높이를 증가시키지 않습니다. CSS의 줄 높이는 무엇입니까패딩이 가려지고 여백이 0으로 재설정되고 테두리 하단도 가려집니다.

padding-left, padding-right, border-left 및 border-right를 사용할 수 있습니다.
  • img 요소는 행 높이에 영향을 미칩니다.
  • 인라인 요소의 패딩, 테두리 및 여백을 설정하면 아래와 같이 외부 요소의 높이가 증가하지 않습니다.

6 행 높이 설정

  • CSS에서는 line-height 속성을 사용하여 줄 높이를 설정할 수 있습니다. line-height 속성은 선 사이의 거리(선 높이)를 설정하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다.

    line-height 속성은 줄 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.
  • 줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.
  • 예: 行内元素与CSS의 줄 높이는 무엇입니까
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			p.small {
    				line-height: 90%
    			}
    			
    			p.big {
    				line-height: 200%
    			}
    		</style>
    	</head>
    
    	<body>
    
    		<p>
    			这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 在大多数浏览器中默认CSS의 줄 높이는 무엇입니까大约是 110% 到 120%。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。 这是拥有标准CSS의 줄 높이는 무엇입니까的段落。
    		</p>
    
    		<p class="small">
    			这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。 这个段落拥有更小的CSS의 줄 높이는 무엇입니까。
    		</p>
    
    		<p class="big">
    			这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。 这个段落拥有更大的CSS의 줄 높이는 무엇입니까。
    		</p>
    
    	</body>
    
    </html>
    로그인 후 복사
  • 렌더링:

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS의 줄 높이는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿