줄 간격 설정

MS Word에서 설정할 수있는 것처럼 CSS로 줄 간격을 설정하는 방법은 무엇입니까?

선 높이 속성을 사용해보십시오 .

예를 들어, 12px 글꼴 크기와 4px는 아래쪽과 위쪽 줄에서 떨어져 있습니다.

line-height: 20px; /* 4px +12px + 4px */

또는 em단위

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

또한 줄 수인 단위가없는 값을 사용할 수 있습니다. line-height: 2;이중 간격, line-height: 1.5;1 등 반 등입니다.

줄 높이를 사용하여 CSS에서 단락 간 간격을 설정할 수 없습니다. <p>블록 . 대신 단락 내 줄 간격을 설정합니다.<p> 블록 . 즉, 선 높이는 단락 내에서 타이포 그래퍼의 선간 행간이 선 높이로 제어됩니다.

나는 현재 <p>글꼴 속성에 em 또는 rem 변형을 사용하는지 여부에 관계없이 CSS에서 0.15em 간격 을 생성하는 방법을 알지 못합니다 . 더 복잡한 플로트 또는 오프셋으로 수행 할 수 있다고 생각합니다. 이것은 CSS에서 필요합니다.

압축 된 선을 원하면 font-size및에 대해 동일한 값을 설정할 수 있습니다line-height

CSS 파일에서

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

HTML 파일에서

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> jsfiddle.net에서이 스 니펫으로 플레이

line-height미세한 줄 간격 제어를 위해 늘릴 수도 있습니다 .

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

이 속성을 사용해보십시오

line-height:200%;

또는

line-height:17px;

볼륨을 높이고 줄이십시오.

이것이 당신이 의미하는 바인지 확실하지 않습니다.

line-height: size;

line-height재산을 보십시오 ; 선 높이를 지정하는 방법에는 여러 가지가 있습니다

모두가 말한 것처럼 그렇습니다 line-height. 높이 중간 문자 (예 : a 또는 ■, 위 또는 아래를 거치지 않는)를 사용하는 모든 글꼴의 높이 길이는 line-height: 0.6~ 와 같아야 합니다 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

lineSpacing은 React Native (또는 기본 모바일 앱)에서 사용됩니다.

웹의 경우 letterSpacing(또는 letter-spacing)