CSS 간격을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-07-23 15:05:069748검색
설정 방법: 1. 문자 간격 속성을 사용하여 단어 간격을 설정합니다. 구문은 "letter-spacing: 픽셀 크기"입니다. 2. line-height 속성을 사용하여 줄 간격을 설정합니다. 구문은 "line-height"입니다. : 픽셀 크기".
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
1. CSS에서 단어 간격 설정:
문자 간격 속성을 사용하여 단어 간격을 설정합니다.
letter-spacing 속성은 문자 사이의 간격(문자 간격)을 늘리거나 줄입니다.
이 속성은 텍스트 문자 상자 사이에 삽입되는 공백의 크기를 정의합니다. 문자 글리프는 일반적으로 문자 상자보다 좁기 때문에 길이 값을 지정하면 문자 사이의 일반적인 간격이 조정됩니다. 따라서 Normal은 0값과 동일합니다.
참고: 음수 값이 허용되며, 이로 인해 문자가 서로 더 가까워집니다.
속성 값:
일반 기본값. 문자 사이에 추가 공백을 지정하지 않습니다.
length는 문자 사이의 고정된 공백을 정의합니다(음수 값 허용).
inherit는 문자 간격 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
예:
<html>
<head>
<style type="text/css">
p.p1 {letter-spacing: -0.5em}
p.p2{letter-spacing: 20px}
</style>
</head>
<body>
<p class="p1">我的公主殿下</p>
<p class="p2">臣来迟了</p>
</body>
</html>효과:
2. CSS 줄 간격 설정
line-height 속성을 사용하여 줄 사이의 거리(줄 높이)를 설정할 수 있습니다.
참고: 음수 값은 허용되지 않습니다.
설명
이 속성은 라인 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.
줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다.
원래 숫자 값은 배율 인수를 지정하며, 하위 요소는 계산된 값 대신 이 배율 인수를 상속합니다.
속성 값:
일반 기본값. 적당한 줄 간격을 설정하세요.
number는 숫자를 설정하며, 이 숫자에 현재 글꼴 크기를 곱하여 줄 간격을 설정합니다.
length는 고정된 줄 간격을 설정합니다. 현재 글꼴 크기를 기준으로 한 % 줄 간격입니다.
inherit는
line-height 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span {
font-size: 20px;
line-height: 2em;
}
</style>
</head>
<body>
<span>
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
</span>
</body>
</html>효과:
추천 학습: css 비디오 튜토리얼
위 내용은 CSS 간격을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!