CSS 패딩 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 패딩 속성을 사용하는 방법

silencement

풀어 주다： 2019-05-27 15:47:51

원래의

4868명이 탐색했습니다.

CSS 패딩 속성을 사용하는 방법

css padding 속성 정의 및 사용법

css에서 padding 속성은 줄인 속성으로 위쪽 여백 속성, 오른쪽 여백 속성, 아래쪽 여백 속성 등 모든 패딩 속성을 설정하는 데 사용됩니다. 왼쪽 여백 속성은 동일한 선언에 정의되어 있습니다.

css 패딩 속성 구문 형식

1.padding: 속성 값 1 속성 값 2 속성 값 3 속성 값 4

2.padding: 속성 값 1 속성 값 2 속성 값 3

3.padding: 속성 값 1 속성 값 2

4.padding: 속성 값 1

설명:

1 padding 속성에 4개의 속성 값이 있는 경우: 4개의 속성 값은 상단 패딩, 오른쪽 패딩, 하단 여백을 정의합니다. 패딩, 왼쪽 패딩

2. 패딩 속성에 세 가지 속성 값이 있는 경우 속성 값 1과 속성 값 3은 각각 상단 패딩과 하단 패딩을 정의합니다. 속성 값 2는 오른쪽 패딩과 왼쪽 패딩을 정의합니다.

3. padding 속성에 두 개의 속성 값이 있는 경우: 속성 값 1은 상단 패딩과 하단 패딩을 정의합니다. 속성 값 2는 오른쪽 패딩과 왼쪽 패딩을 정의합니다

4. 패딩 속성에 속성 값이 하나만 있는 경우: 이 속성 값은 상단 패딩, 오른쪽 패딩, 하단 패딩, 왼쪽 패딩을 정의합니다

가능한 속성 값

auto: 브라우저가 패딩을 계산합니다.

length: 픽셀, 센티미터 등과 같은 특정 단위로 패딩 값을 지정합니다. (기본값은 0px)

%: 상위 요소를 기반으로 지정합니다. 패딩은 너비의 백분율로 표시됩니다.

inherit: 상위 요소

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css padding属性设置元素内边距</title>
<style type="text/css">
div{width:260px;border:1px solid #000;padding:10px 20px 30px 40px;}
</style>
</head>
<body>
<div>padding属性设置元素内边距，这是为了演示效果所添加的文本。
padding:12px 14px 16px 18px;</div>
</body>
</html>

로그인 후 복사

실행 결과

에서 패딩 속성 값을 상속합니다.