CSS의 패딩 소개

• : 백분율을 사용하여 내부 패딩을 정의합니다. 가로(기본) 쓰기 모드에서는 계산을 위해 해당 포함 블록
너비
• 를 참조하고

  다른 경우는 높이를 참조합니다. 음수 값은 허용되지 않습니다

는 개체

4가지 매개변수 값을 모두 제공하면 상, 우, 하, 좌 순으로 4면에 적용됩니다.

• 1개만 제공되면 4개 면 모두 사용됩니다.

• 두 개가 제공되는 경우 첫 번째는 상하용, 두 번째는 왼쪽 및 오른쪽용입니다.

• 3개가 제공되면 첫 번째는 위쪽용, 두 번째는 왼쪽 및 오른쪽용, 세 번째는 아래쪽용입니다.

• 대체되지 않은 인라인 요소는 이 속성을 사용하여 왼쪽과 오른쪽에 내부 패치를 설정할 수 있습니다. 위쪽과 아래쪽에 내부 패치를 설정하려면 다음을 수행해야 합니다. 먼저 개체가 블록 수준 또는 인라인 블록 수준으로 표시되도록 만듭니다.

• 의 해당 스크립트 기능은

  padding
입니다.

확장 :

,borderpadding 값 약어

패딩 :

== 패딩 : 20px 20px 20px 20px; 패딩 :

== 패딩 : 20px 10px 20px 10px;

20px 10px 30px == 패딩: 20px 10px 30px 10px;

nbsp;html>
    <meta>
    <title>padding 填充</title>
    <style>
    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>
    <p>sample</p><br>
    <p>sample</p>
    <br>
    <p>sample</p>
    <br>
    <p>
        </p><p>child </p>