CSS 상단 여백을 설정하는 방법
- 青灯夜游원래의
- 2021-07-15 16:50:2112569검색
CSS에서 상단 여백을 설정하는 방법: 1. margin-top 속성을 사용하여 요소의 상단 여백을 설정합니다. 2. padding-top 속성을 사용하여 요소의 상단 여백을 설정합니다. margin-top 및 padding-top 속성은 픽셀, 인치, 밀리미터 또는 em 등 모든 길이 단위를 허용합니다.
이 튜토리얼의 운영 환경: 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 방법으로 상단 여백 설정 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 동영상 튜토리얼)
위 내용은 CSS 상단 여백을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 스타일은 무엇으로 구성되어 있나요?다음 기사：CSS 스타일은 무엇으로 구성되어 있나요?