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

CSS 단락 간격을 설정하는 방법

醉折花枝作酒筹

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

원래의

11677명이 탐색했습니다.

설정 방법: 1. 줄 높이 속성 설정을 사용하고 "줄 높이: 높이 값" 구문을 사용합니다. 2. 패딩을 사용하여 단락의 상단 및 하단 간격을 설정합니다. 구문 "패딩: 간격 값 0" 3. 여백을 사용하여 상단 및 하단 단락 간격을 설정합니다. 구문은 "여백: 간격 값 0"입니다.

CSS 단락 간격을 설정하는 방법

이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!