CSS의 패딩에 대한 자세한 설명
- 迷茫원래의
- 2017-03-25 15:34:492278검색
구문:
패딩: [
기본값 각 개별 속성을 살펴보세요
: table-row-group | table-column-group | 외부상속
: 없음애니메이션
: 예계산된 값
: 각 독립 속성 참조관련 속성
: [ padding-top ] || [ padding-right ] || [ padding-left ]값:
-
: 백분율을 사용하여 내부 패딩을 정의합니다. 가로(기본) 쓰기 모드에서는 계산을 위해 포함 블록의 너비를 참조하고, 다른 경우에는 높이를 참조합니다. 음수 값은 허용되지 않습니다. - 설명:
객체의 네 변의 내부 여백을 검색하거나 설정합니다.
4가지 매개변수 값을 모두 제공하면 상, 우, 하, 좌 순으로 4면에 적용됩니다.
- 1개만 제공되면 4개 면 모두 사용됩니다.
- 두 개가 제공되는 경우 첫 번째는 상하용, 두 번째는 왼쪽 및 오른쪽용입니다.
- 3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.
- 대체되지 않은 인라인 요소는 이 속성을 사용하여 왼쪽과 오른쪽에 내부 패치를 설정할 수 있습니다. 위쪽과 아래쪽에 내부 패치를 설정하려면 다음을 수행해야 합니다. 먼저 개체가 블록 수준 또는 인라인 블록 수준으로 표시되도록 만듭니다.
- 의 해당 스크립트 기능은 padding
- 입니다.
여백,borderpadding 값 약어
padding:
20px; == 패딩 : 20px 20px 20px 20px;
패딩 :20px 10px; = = 패딩 : 20px 10px 20px 10px;
패딩 : 20px 10px 30px == 패딩 : 20px 10px 30px 10px;대변이 같으면 후자가 생략되고, 4변이 같으면 하나만
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>padding 填充</title>
<style type="text/css">
p,span{
border: 1px dashed red;
}
.sample0{
padding: 20px;
}
.sample1{
padding: 40px 30px 20px 10px;
}
.sample2{
padding: 20px 10px 20px;
}
.parent{
padding:20px;
}
.child{
border: 1px solid blue;
}
</style></head><body>
<p class="sample0">sample</p><br>
<p class="sample1">sample</p>
<br>
<p class="sample2">sample</p>
<br>
<p class="parent">
<p class="child">child </p>
</p></body></html>위 내용은 CSS의 패딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.