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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
위 내용은 HTML에서 단락 줄 높이와 줄 간격을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!