CSS 상단 여백을 설정하는 방법-CSS 튜토리얼-php.cn

CSS 상단 여백을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-07 11:43:39

원래의

12592명이 탐색했습니다.

CSS에서 상단 여백을 설정하는 방법: 1. margin-top 속성을 사용하여 요소의 상단 여백을 설정합니다. 2. padding-top 속성을 사용하여 요소의 상단 여백을 설정합니다. margin-top 및 padding-top 속성은 픽셀, 인치, 밀리미터 또는 em 등 모든 길이 단위를 허용합니다.

CSS 상단 여백을 설정하는 방법

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

CSS에서 상단 여백을 설정하는 방법 1: margin-top 속성을 사용합니다.

margin-top 속성은 요소의 상단 여백을 설정할 수 있습니다.

요소 테두리를 둘러싼 빈 영역은 외부 여백입니다. 여백을 설정하면 요소 외부에 추가 "공백"이 생성됩니다.

여백 속성은 모든 길이 단위(픽셀, 인치, 밀리미터 또는 em.), 백분율 값 또는 음수 값의 영향을 받습니다.

속성 값:

값	설명
auto	브라우저에서 설정한 상단 여백입니다.
length	은 고정 상단 여백을 정의합니다. 기본값은 0입니다.
%	위쪽 여백을 상위 개체의 전체 너비를 기준으로 한 백분율로 정의합니다.
inherit	은 위쪽 여백이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>

<body>

<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p>一个没有指定边距大小的段落。</p>

</body>
</html>

로그인 후 복사

Rendering:

CSS 상단 여백을 설정하는 방법

Css 방법으로 상단 여백 설정 2: padding-top 속성을 사용

padding-top 속성을 사용하여 요소의 상단 패딩을 설정

요소의 패딩은 테두리와 콘텐츠 영역 사이에 있습니다.
padding 속성은 길이 값이나 백분율 값을 허용하지만 음수 값은 허용됩니다. 허용되지 않습니다.

속성 값:

값	설명
length	픽셀, 센티미터 등과 같은 특정 단위로 고정된 상단 패딩 값을 지정합니다. 기본값은 0px입니다.
%	상위 요소의 너비를 기준으로 상단 패딩을 백분율로 정의합니다. 이 값은 모든 브라우저에서 예상대로 작동하지 않습니다.
inherit	은 상단 패딩이 상위 요소에서 상속되어야 함을 지정합니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:20%;}
</style>
</head>

<body>
<p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
<p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
<p class="padding2">这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。这个文本的上部填充边距为20%。</p>
</body>
</html>

로그인 후 복사

렌더링:

CSS 상단 여백을 설정하는 방법