CSS 단락 간격을 설정하는 방법
- 醉折花枝作酒筹원래의
- 2021-04-20 16:27:5711710검색
설정 방법: 1. 줄 높이 속성 설정을 사용하고 "줄 높이: 높이 값" 구문을 사용합니다. 2. 패딩을 사용하여 단락의 상단 및 하단 간격을 설정합니다. 구문 "패딩: 간격 값 0" 3. 여백을 사용하여 상단 및 하단 단락 간격을 설정합니다. 구문은 "여백: 간격 값 0"입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS를 통해 위쪽 단락과 아래쪽 단락 사이의 거리를 설정하는 세 가지 일반적인 방법이 있습니다.
1. Line-height
line-height 값을 크게 설정할수록 단락 간격이 늘어나고, 동시에 단어와 줄 간격도 늘어납니다. 이 줄 높이 스타일을 사용하여 단락 간격 거리를 설정하는 것은 권장되지 않습니다. 효과를 관찰하기 위해 CSS line-height를 각각 20px와 50px로 설정하여 효과를 비교했습니다.
주요 CSS 코드: p{line-height:22px}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{
line-height:30px
}
/* css 注释： 设置行高为30px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
</body>
</html>2.CSS 패딩 내부 패딩(내부 여백)
패딩을 사용하여 문단의 상단 및 하단 간격을 설정하는 것이 좋습니다. 상단 및 하단 내부 패딩과 내부 간격을 설정하여 p 문단의 상단 및 하단 간격을 설정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{
padding:15px 0
}
/* css注释： 设置padding为上下15px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>3. CSS 여백
CSS 문단 간격 조정 여백은 위쪽 문단과 아래쪽 문단 사이의 간격 스타일 설정을 구현합니다. 여백은 위쪽, 아래쪽, 왼쪽, 오른쪽 개체와 개체 사이의 거리를 설정하는 것임을 알고 있습니다. . 이 CSS 스타일은 여기 단락에도 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style>
p{
margin:10px 0
}
/* css注释： 设置margin为对象上下间距10px */
</style>
</head>
<body>
<p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
</body>
</html>추천 학습: css 비디오 튜토리얼
위 내용은 CSS 단락 간격을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!