CSS의 줄 높이는 무엇입니까

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

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

줄 높이에는 콘텐츠 영역과 콘텐츠 영역을 기준으로 대칭적으로 확장된 공백 영역이 포함됩니다. 일반적으로 이는 인접한 텍스트 줄의 기준선 사이의 수직 거리로 간주될 수도 있습니다. 이 문장을 이해하려면 먼저 몇 가지 기본 지식을 이해해야 합니다.

윗줄, 중간선, 기준선, 밑줄

nbsp;html>

    
        <title>Test</title>
        <style>
            span
            {
                padding:0px;
                line-height:1.5;
            }
        </style>
    
    
        <div>
            <div>
                <span>中文English</span>
                <span>English中文</span>
            </div>
        </div>
    

위에서 아래까지의 네 줄은 윗줄, 중간선, 기준선, 그리고 밑줄. 우리가 처음 영어 알파벳을 배울 때 4줄과 3칸이 있듯이, 수직 정렬 속성에는 이 4줄과 관련된 top, middle, baseline, Bottom이 포함되어 있음을 알고 있습니다.

특히 기준선은 최종선이 아니라 최종선이 최종선이라는 점을 기억하세요.

줄 높이, 줄 간격 및 반 간격

줄 높이는 컨텍스트 줄의 기준선 사이의 수직 거리, 즉 그림에서 두 개의 빨간색 선 사이의 수직 거리를 나타냅니다.

레깅스는 한 줄의 밑줄에서 다음 줄의 윗줄까지의 수직 거리, 즉 첫 번째 줄의 핑크색 라인과 두 번째 줄의 녹색 라인 사이의 수직 거리를 말합니다.

반 줄 간격은 줄 간격의 절반, 즉 영역 3/2의 세로 거리, 영역 1, 2, 3, 4의 거리의 합이 줄 높이, 거리의 합이 됩니다. 영역 1, 2, 4는 글꼴 크기이므로 반 줄 간격 다음과 같이 계산할 수도 있습니다. (줄 높이 - 글꼴 크기)/2

콘텐츠 영역, 인라인 상자, 줄 상자

내용 영역: 밑줄과 윗줄로 둘러싸인 영역, 즉 아래 사진의 어두운 회색 배경 영역입니다.

인라인 상자, 각 인라인 요소는 브라우저 렌더링 모델의 개념이며 다른 요소(패딩 등)가 없으면 표시할 수 없습니다. 상자 상자는 내용 영역과 동일합니다. 줄 높이를 설정할 때 인라인 상자의 높이는 변경되지 않습니다. 줄 간격[(줄 높이-글꼴 크기)/2]이 위쪽으로 증가/감소합니다.

라인 박스(line box), 라인 박스는 이 라인의 가상 직사각형 박스를 의미하며 실제로는 그렇지 않습니다. 표시됩니다. 라인 박스의 높이는 이 행의 모든 ​​요소 중 인라인 박스의 가장 큰 값과 같습니다(행 높이 값이 가장 큰 인라인 박스가 벤치마크로 사용되며, 다른 인라인 박스는 자체 기준을 사용하여 벤치마크에 정렬됨). 줄 상자의 높이가 최종적으로 계산됩니다. 여러 줄 내용이 있는 경우 각 줄에는 자체 줄 상자가 있습니다.

<div>
                <span>中文English</span>
                <span>中文English</span>
                <span>English中文</span>
                <span>English中文</span>
            </div>

line-height

이제 기본 개념이 명확해졌으므로 이 글의 주인공인 line-height 속성에 대해 이야기할 수 있습니다.

정의: line-height 속성은 선 사이의 거리(선 높이)를 설정하며 음수 값은 사용할 수 없습니다. 이 속성은 라인 상자의 레이아웃에 영향을 줍니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다. 줄 높이와 글꼴 크기(줄 간격) 사이의 계산된 차이는 두 부분으로 나누어 텍스트 줄의 위쪽과 아래쪽에 추가됩니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.

가능한 값 ​​

값	설명
normal	기본값, 적절한 줄 간격을 설정합니다.
number	숫자를 설정하세요. 이 숫자에 현재 글꼴 크기를 곱해 줄 간격을 설정합니다. 고정된 줄 간격을 설정하려면
length	의 배수와 동일합니다.
%	현재 글꼴 크기를 기준으로 한 줄 간격의 백분율입니다.
inherit	은 line-height 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

貌似很简单，但感觉没什么用出的样子，那就让我们看看line-height的几个应用

div文字垂直居中

div居中对齐一直是个难题，水平还好解决些，margin：0 auto; 可以解决现代浏览器，IE下text-align:center。但垂直居中就没那么简单了，默认是这样子的。

<div style="width:150px;height:100px;background-color:#ccc;">
                <span>This is a test.<br/>
                        This is a test.                </span>
            </div>

我们可以利用line-block这样做

<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
                <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">This is a test.<br/>
                        This is a test.
                </span>
            </div>

单行就比较简单了，把line-height设置为box的大小可以实现单行文字的垂直居中

<div style="line-height:100px;border:dashed 1px #0e0;">
                This is a test.            </div>

元素对行高影响

行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。

<div style="border:dashed 1px #0e0;margin-bottom:30px;">
                <span style="font-size:14px;background-color:#999;">This is a test</span>
            </div>
            <div style="border:dashed 1px #0e0;">
                <span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
            </div>

第二个span虽然因为padding原因内容区变大，当行高并未改变

行高的继承

行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123
                </p>
            </div>

按一般理解既然line-height可以继承，那么p元素的行高也是150%了，可是事实是这样的

非但没有变成150%，反而连100%都没有，重叠了！这就是继承计算的结果，如果父元素的line-height有单位（px、%）,那么继承的值则是换算后的一个具体的px级别的值；上例p得到的是10px*150%=15px的行高，而P的字体大小为30px，所以发生了重叠。

而如果属性值没有单位，则浏览器会直接继承这个“因子（数值）”，而非计算后的具体值，此时它的line-height会根据本身的font-size值重新计算得到新的line-height 值。

<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                    123
                </p>
            </div>

所以在使用line-height时，除非你刻意否则尽量使用倍数设值

（学习视频分享：css视频教程）

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