CSS Padding
CSS Padding 속성은 요소의 테두리와 내용 사이의 공간을 정의합니다.
Padding
요소의 Padding(패딩)이 지워지면 "해제된" 영역이 해당 요소의 배경색으로 채워집니다.
채우기 속성만 사용하여 위쪽, 아래쪽, 왼쪽 및 오른쪽 패딩을 변경할 수 있습니다. 약어 채우기 속성도 사용할 수 있으며, 일단 변경되면 모든 것이 변경됩니다.
Padding 속성 값(픽셀, 센티미터, 백분율 %
CSS 패딩 속성
| 속성 | 설명 |
|---|---|
| padding | 약어 속성을 사용하여 모두 설정) 하나의 문에서 패딩 속성 |
| padding-bottom | 요소의 하단 패딩 설정 |
| padding-left | 요소의 왼쪽 패딩 설정 |
| padding-right | 요소의 오른쪽 패딩 설정 |
| padding-top | 요소의 상단 패딩을 설정합니다 |
CSS에서는 서로 다른 측면에 서로 다른 패딩을 지정할 수 있습니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
padding - 단축 속성
코드를 단축하려면 , 속성에 지정된 모든 패딩 속성에서 수행할 수 있습니다.
이것은 소위 약어 속성입니다. 모든 패딩 속성의 약어는 "padding"입니다.
Padding 속성은 1~4개의 값을 가질 수 있습니다.
패딩: 25px 50px 75px 100px;
상단 패딩은 25px
오른쪽 패딩은 50px
하단 패딩은 75px
왼쪽 패딩은 100px
패딩: 25px 50p x 75px;
상단 패딩은 25px입니다.
왼쪽 및 오른쪽 패딩은 50px
하단 패딩은 75px
padding:25px 50px;
상하 패딩은 25px
왼쪽 및 오른쪽 패딩은 50px
padding:25px;
모든 패딩은 25px입니다
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>
<body>
<p>这是一段没有指定填充。</p>
<p class="padding">这一段指定l填充。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
Example
선언에 모든 패딩 속성을 설정하고, 1~4개의 값을 가질 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">这个文本填充两边相等。填充每边2厘米。</p>
<p class="ex2">这个文本填充两边相等。填充每边2厘米。</p>
</body>
</html>프로그램을 실행해서 사용해 보세요
