줄 높이는 텍스트 문자 및 브라우저 렌더링과 어떻게 상호 작용합니까?

줄 높이가 텍스트에 따라 달라지나요? 캐릭터?

<p>blah_blah</p><p></p><p></p><p>qypj;,</p>

> ;

CSS에서 line-height를 1로 설정하면 동작이 달라질 수 있습니다. 브라우저 전반에 걸쳐. Firefox에서 렌더링된 이 예는 첫 번째 줄의 밑줄이 표시되지 않지만 세 번째 줄에는 표시되는 것을 보여줍니다. 다른 브라우저와 스니펫 실행기는 두 경우 모두 밑줄을 표시합니다.

어떤 동작이 올바른가요?

다른 브라우저와 글꼴이 줄 높이 계산에 영향을 미칠 수 있습니다. line-height 속성에만 의존하지 않습니다.

문자로 줄 높이를 변경할 수 있나요?

아니요, 문자만으로는 줄 높이를 변경할 수 없습니다. 그러나 "p", "g" 및 "j"와 같은 특정 문자는 기준선 아래로 확장되어 줄에 필요한 세로 공간을 차지할 수 있습니다.

줄 높이의 의미: 1

line-height를 1로 설정한다고 해서 텍스트가 지정된 공간에 맞는다는 보장은 없습니다. 줄 상자가 정확히 글꼴 크기여야 한다는 점만 지정합니다.

콘텐츠 영역과 줄 상자

글꼴 속성은 콘텐츠 영역을 정의하고, 줄은 - 높이는 라인 상자를 제어합니다. 콘텐츠 영역을 제어할 수는 없지만 텍스트를 수용하도록 줄 상자를 조정할 수 있습니다.

예:

span {<br> background: red;<br> 색상: #fff;<br> 글꼴 크기: 20px;<br> 글꼴 계열: monospace;<br>}<p>body {<br> margin: 10px 0;<br> border-top: 1px solid;<br> border-bottom: 1px solid;<br> animation: 2s 선형 변경 무한 대체;<br>}</p><p>@keyframes 변경 {<br> {</p><pre class="brush:php;toolbar:false">line-height: 0.2

}

에 {

line-height: 2

}
}

blah_blah<br>

이 예에서 스팬의 콘텐츠 영역은 일정하게 유지되지만 라인 상자는 확장 및 축소됩니다. 줄 높이가 변경됨에 따라. 이는 컨텐츠 영역과 라인박스의 독립적인 제어를 보여줍니다.

위 내용은 줄 높이는 텍스트 문자 및 브라우저 렌더링과 어떻게 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!