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

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Oct 10, 2018 pm 02:31 PM

csspadding심

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 비디오 튜토리얼을 방문하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

시각적 웹 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는