CSS에서 패딩을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 패딩을 설정하는 방법

醉折花枝作酒筹

풀어 주다： 2023-01-05 16:10:28

원래의

5989명이 탐색했습니다.

CSS에서는 padding 속성을 사용하여 요소에 "padding: 값 + 단위 | 백분율 값"만 설정하면 됩니다. padding 속성은 요소의 모든 패딩 너비를 설정하거나 각 측면의 패딩 너비를 설정합니다. 패딩 속성은 음수 여백 값 지정을 허용하지 않습니다.

CSS에서 패딩을 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

패딩(padding) 설정 방법을 살펴보겠습니다.

우리의 패딩은 CSS 박스 모델 중 하나이므로 이제 패딩 설정 방법을 살펴보겠습니다.

padding: 선언에서 모든 패딩 속성을 설정할 수 있는 단축 속성입니다.

padding 속성만 사용하여 위쪽, 아래쪽, 왼쪽 및 오른쪽 패딩을 변경할 수 있습니다.

가능한 값:

length: 고정 패딩 정의(픽셀, pt, em 등)

%: 백분율 값을 사용하여 패딩 정의

사용법:

padding-left 객체를 왼쪽으로 여백 패딩 간격

div{padding-left:5px}

로그인 후 복사

객체 내 왼쪽 패딩 간격은 5px

padding-right 객체 오른쪽부터 여백 패딩 간격을 설정합니다

div{padding-right:5px}

로그인 후 복사

객체 내 오른쪽 패딩 간격은 5px

padding-top 설정 객체 상단의 패딩 간격은 5px

div{padding-top:5px}

로그인 후 복사

객체 상단의 패딩 간격은 5px

padding-bottom 객체 하단의 패딩 간격을 설정합니다.

div{padding-bottom:5px}

로그인 후 복사

객체 하단의 패딩 간격은 5px입니다.

지침

객체의 네 변에 있는 패치 여백을 검색하거나 설정합니다.

파라미터 값 4개를 모두 입력하면 상-우-하-좌 순으로 4면에 적용됩니다.

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

2개 제공시 첫번째는 상하용, 두번째는 좌우용입니다.

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

인라인 개체에서 이 속성을 사용하려면 먼저 개체의 높이 또는 너비 속성을 설정하거나 위치 속성을 절대값으로 설정해야 합니다.

Padding 값은 음수일 수 없습니다.

예:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .css{ 
                width:350px; 
                height:80px; 
                border:1px solid #00F; 
                padding-left:40px;
                padding-right:40px;
                padding-top:40px;
                padding-bottom:40px;
                /* 可以合起来写成padding:40px; */
                } 
    </style> 
    </head>

    <body>
        <div class="css">padding用法</div>
    </body>
</html>

로그인 후 복사

렌더링:

CSS에서 패딩을 설정하는 방법