CSS 패딩

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>

프로그램을 실행해서 사용해 보세요

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전