CSS에서 위쪽과 아래쪽 간격을 조정하는 방법-CSS 튜토리얼-php.cn

CSS에서 위쪽과 아래쪽 간격을 조정하는 방법

青灯夜游

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

원래의

16173명이 탐색했습니다.

조정 방법: 1. line-height 속성을 사용하여 선 사이의 거리를 설정합니다. 2. margin-top 및 margin-bottom 속성을 사용하여 위쪽 및 아래쪽 여백을 설정합니다. 3. padding-top 및 padding-을 사용합니다. 하단 속성은 상단 및 하단 패딩을 설정할 수 있습니다.

CSS에서 위쪽과 아래쪽 간격을 조정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

1. Line-height는 단락의 상단 및 하단 간격을 설정합니다.

p 태그 상단 및 하단 간격 설정 CSS 코드

p{ line-height:30px}

로그인 후 복사

2 Margin-top 및 margin-bottom은 상단 및 하단 간격을 설정합니다. the Paragraph

p{margin-top:10px;margin-bottom:10px}

로그인 후 복사

p 태그 상단과 margin-bottom에 margin-을 설정하여 단락의 상단 및 하단 간격을 설정합니다.

margin-top은 요소의 위쪽 여백을 설정할 수 있고, margin-bottom은 요소의 아래쪽 여백을 설정할 수 있습니다.

3. padding-top 및 padding-bottom은 문단의 상단 및 하단 간격을 설정합니다.

p{padding-top:10px;padding-bottom:10px}

로그인 후 복사

padding-top은 요소의 상단 패딩을 설정하고, padding-bottom은 요소의 하단 패딩을 설정합니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				border: 1px solid #000;
				margin: 10px;
			}
			
			.p-a p {
				line-height: 40px;
				text-align: left
			}
			
			.p-b p {
				margin-top: 25px;
				margin-bottom: 25px
			}
			.p-c p {
				padding-top: 20px;
				padding-bottom: 20px
			}
		</style>
	</head>

	<body>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-a">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-b">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
		<div class="p-c">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS에서 위쪽과 아래쪽 간격을 조정하는 방법