집 > 기사 > 웹 프론트엔드 > CSS에서 단락 간격을 조정하기 위해 패딩을 사용하는 방법은 무엇입니까? (코드 예)

CSS에서 단락 간격을 조정하기 위해 패딩을 사용하는 방법은 무엇입니까? (코드 예)

青灯夜游원래의: 2018-10-10 14:31:093927검색

CSS에서 단락 간격을 설정하는 방법은 무엇입니까? 이전 글에서 [CSS에서 단락 간격을 설정하는 방법은 무엇입니까? 여백 속성 단락 간격 설정 (코드 예) ] CSS가 바깥 여백을 사용하여 단락 간격을 설정하고 조정하는 방법을 소개했습니다. 이번 장에서는 CSS가 안쪽 여백을 사용하여 단락 간격을 설정하고 조정하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 CSS의 패딩을 설정하는 방법을 알아볼까요?

CSS의 내부 여백 설정은 실제로 매우 간단합니다. css padding 속성을 사용하면 이 속성을 간단히 소개하겠습니다.

padding: 요소의 모든 내부 가장자리를 동시에 설정할 수 있는 약식 속성입니다. 시간 거리는 1부터 4까지의 값을 가질 수 있으며 음수 값은 허용되지 않습니다.

설명:

padding 속성은 요소의 모든 패딩 너비를 설정하거나 각 측면의 패딩 너비를 설정합니다. 대체되지 않은 인라인 요소에 설정된 패딩은 줄 높이 계산에 영향을 주지 않습니다. 따라서 요소에 패딩과 배경이 모두 있는 경우 시각적으로 다른 줄로 확장되어 다른 콘텐츠와 겹칠 수 있습니다. 요소의 배경은 패딩을 가로질러 확장됩니다. 음수 여백 값은 허용되지 않습니다.

작은 예:

padding:10px 5px 15px 20px;

padding은 상단 패딩을 10px, 오른쪽 패딩을 5px, 하단 패딩을 15px, 왼쪽 패딩을 20px로 설정합니다.

css의 패딩은 padding의 약어를 사용하지 않고 설정할 수도 있고, 요소의 모든 패딩을 동시에 설정할 수도 있으므로 여백을 별도로 설정할 수 있으므로 설정 속성을 살펴보겠습니다. padding 분리:

padding-top: 위쪽 패딩

padding-right: 오른쪽 패딩

padding-bottom: 아래쪽 패딩

padding-left: 왼쪽 패딩

간단한 코드 예제로 자세히 설명해보자. 단락 간격을 설정하고 조정하는 패딩!

1. padding 약어를 사용하여 상단 및 하단 단락 간격을 동시에 설정합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内边距 调整 段落间距</title>
<style>
.a1{
padding: 20px 0px;
}
</style>
</head>
<body>
<p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a1">第三段，设置上下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第四段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>

Rendering:

CSS에서 단락 간격을 조정하기 위해 패딩을 사용하는 방법은 무엇입니까? (코드 예)

2. padding-top과 padding-bottom을 사용하여 상단 및 하단 간격을 별도로 설정합니다. the Paragraph

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>内边距 调整 段落间距</title>
		<style>
			*{margin: 0px;padding: 0px;}
			.a1{
				padding-top: 20px;
			}
			.a2{
				padding-bottom: 20px;
			}
		</style>
	</head>
	<body>
	    <p>第一段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p>第二段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p class="a1">第三段，设置上段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p class="a2">第四段，设置下段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	    <p>第五段，没有设置段落间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
	</body>
</html>

렌더링:

CSS에서 단락 간격을 조정하기 위해 패딩을 사용하는 방법은 무엇입니까? (코드 예)

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!

CSS에서 단락 간격을 조정하기 위해 패딩을 사용하는 방법은 무엇입니까? (코드 예)

관련 기사