집 >웹 프론트엔드 >HTML 튜토리얼 >HTML에서 단락 줄 높이와 줄 간격을 설정하는 방법

HTML에서 단락 줄 높이와 줄 간격을 설정하는 방법

php中世界最好的语言원래의: 2017-11-22 17:58:4515618검색

p개 단락 사이의 상단 및 하단 간격을 설정하는 방법은 무엇입니까? e388a4556c0f65e1904146cc1a846bee 사이의 줄 간격을 제어할 수 있는 스타일은 무엇입니까? CSS 줄 높이를 작성하는 방법은 무엇입니까? 오늘 우리는 이 P 문단을 명확하게 공부하여 모든 사람이 p 줄 간격과 줄 높이 스타일을 완전히 익힐 수 있도록 하겠습니다.

그럼 CSS 스타일을 통해 p 문단의 상단 및 하단 줄 간격을 설정하는 방법을 소개하겠습니다. p는 기사 문단 태그입니다. p 문단의 줄 간격을 제어하는 CSS div 속성은

1, css line-height

2, margin

3. Padding

관련 간격 및 줄 간격 튜토리얼

1. CSS 텍스트 줄 간격

2. CSS 단어 간격

여백 스타일과 패딩에 의해 결정되며 줄 높이에도 일정한 관계가 있습니다. 다음으로는 예제를 통해 p 문단 사이의 줄 간격을 소개하고, CSS 예제를 통해 p 줄 간격 설정을 마스터하겠습니다.

css+div 사례 설명, 효과를 관찰하기 위해 4개의 DIV 상자 개체를 설정하고 각각 내부에 p 문단을 추가하고 p 문단의 줄 간격을 다르게 설정하여 효과를 관찰하고 효과를 제공하고 규칙을 따르고 p 줄 간격의 CSS 설정을 마스터하세요.

이름은 각각 ".div-a", ".div-b", ".div-c", ".div-d"입니다.

p 단락 태그의 기본 스타일에서 패딩 값은 기본적으로 0. 동시에 p 텍스트 줄 높이를 20px

로 설정합니다. 사례 1, 여백 상한 및 하한을 0

1로 설정합니다. 전체 CSS+div HTML 코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-a p{ margin:0 auto} 
</style> 
</head> 
<body> 
<div class="div-a"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

Set margin-top to 0, margin-bottom은 0, (margin auto의 역할 이해)

위의 예를 통해 margin-top과 margin-bottom의 값이 0으로 설정된 경우를 관찰할 수 있습니다. , p 단락 줄 간격이 존재하지 않으며 효과는 줄 높이 설정 줄 간격과 동일합니다.

사례 2: 위쪽 및 아래쪽 여백을 30px로 설정

1. HTML 소스 코드 완성

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-b p{ margin:30px auto} 
</style> 
</head> 
<body><div class="div-b"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

여기서 ".div-b" 개체에 대해 CSS margin: 30px auto를 설정하는 것은 margin-top을 30px로 설정하는 것과 같습니다. , 여백- 하단은 30px

여러 여백 설정을 통해 줄 간격 조정

위 사례에서 여백 설정을 통해 p 문단 줄 간격을 확보할 수 있음을 알 수 있습니다.

사례 3. 상단 및 하단 여백을 0으로 설정하고 상단 및 하단 패딩을 20px로 설정합니다.

1. HTML 코드 예제 완성

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-c p{ margin:0 auto; padding:20px 0} 
</style> 
</head> 
<body> 
<div class="div-c"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

위에서는 margin-top 및 margin-bottom을 0으로 설정한 다음 설정합니다. padding-top 및 padding-bottom 값은 20px입니다.

위의 사례를 통해 p에 패딩 스타일을 설정해도 줄 간격을 설정할 수 있음을 알 수 있습니다.

사례 4, 여백이나 패딩 스타일을 설정하지 않습니다.

p에 대한 여백 스타일과 패딩 스타일을 설정하지 않습니다. 즉, 기본 P 스타일 줄 간격 효과를 보기 위해 p에 스타일을 설정하지 않는다는 의미입니다.

1. DIV CSS 예제 코드를 완성하세요:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-d p{ } 
</style> 
</head> 
<body> 
<div class="div-d"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

스타일을 설정하지 않으면 p 기본 스타일이 반영됩니다.

이것이 P 단락에 대한 소개입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!