CSS에서 간격을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 간격을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:09

원래의

20337명이 탐색했습니다.

CSS에서 간격을 설정하는 방법: 1. letter-spacing 속성을 사용하여 단어 간격을 설정합니다. 2. line-height 속성을 사용하여 줄 간격, 즉 줄 높이를 설정합니다. 단락 간격이나 요소 사이의 거리를 설정하는 패딩 속성입니다.

CSS에서 간격을 설정하는 방법

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

1. 문자 간격을 설정하려면 letter-spacing 속성을 사용하세요.

letter-spacing 속성은 문자 사이의 간격(문자 간격)을 늘리거나 줄입니다.

이 속성은 텍스트 문자 상자 사이에 삽입되는 공백의 크기를 정의합니다. 문자 글리프는 일반적으로 문자 상자보다 좁기 때문에 길이 값을 지정하면 문자 사이의 일반적인 간격이 조정됩니다. 따라서 Normal은 0값과 동일합니다.

참고: 음수 값이 허용되며, 이로 인해 문자가 서로 더 가까워집니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css设置字间距</title>
		<style type="text/css">
			p.p1 {
				letter-spacing: 20px
				
			}
			
			p.p2 {
				letter-spacing: -0.5em
			}
		</style>
	</head>

	<body>
		<p>php中文网</p>
		<p class="p1">php中文网</p>
		<p class="p2">php中文网</p>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 간격을 설정하는 방법

2 줄 간격을 설정하려면 line-height 속성을 사용하세요.

line-height 속성은 줄 사이의 거리(줄 높이)를 설정할 수 있습니다.

참고: 음수 값은 허용되지 않습니다.

설명

이 속성은 라인 상자의 레이아웃에 영향을 미칩니다. 블록 수준 요소에 적용하면 최대 거리가 아닌 해당 요소의 기준선 간 최소 거리를 정의합니다.

줄 높이와 글꼴 크기(CSS에서는 '줄 간격'이라고 함) 사이의 계산된 차이를 두 부분으로 나누어 텍스트 콘텐츠 줄의 위쪽과 아래쪽에 추가합니다. 이 내용을 담을 수 있는 가장 작은 상자는 라인 상자입니다. (학습 영상 공유: css 영상 튜토리얼)

원래 숫자 값은 배율 인수를 지정하며, 하위 요소는 계산된 값 대신 이 배율 인수를 상속합니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用数值来设置行间距</title>
		<style type="text/css">
			p.small {
				line-height: 0.5
			}
			
			p.big {
				line-height: 2
			}
		</style>
	</head>
	<body>
		<p>
			这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 간격을 설정하는 방법

3. 여백 또는 패딩 속성을 사용하여 단락 간격을 설정하세요.

margin은 요소의 외부 여백을 설정하고 패딩은 요소의 내부 여백을 설정할 수 있습니다. .

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				border: 1px solid #000;
				margin: 10px;
			}
			
			.p-a p {
				margin: 25px 0;
			}
			.p-b p {
				padding: 20px 0;
			}
		</style>
	</head>

	<body>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-a">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-b">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 간격을 설정하는 방법