상자 패딩

패딩이란:

패딩은 텍스트(콘텐츠) 외부와 테두리(border) 내부에 있습니다. 이 영역을 제어하는 ​​가장 간단한 속성은 패딩 속성입니다. padding 속성은 요소의 테두리와 내용 사이의 공백을 정의합니다.

CSS 패딩 속성은 요소의 패딩을 정의합니다. padding 속성은 길이 값이나 백분율 값을 허용하지만 음수 값은 허용하지 않습니다.

균일한 패딩을 설정하거나 일방적인 패딩을 설정할 수 있습니다. 예를 들어 모든 h1 요소의 양쪽에 10픽셀의 패딩을 적용하려면 다음과 같이 하세요.

h1 {padding: 10px;}

You 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 각 측면의 패딩을 설정할 수도 있습니다.

h1 {padding: 10px 0.25em 2ex 20%;}

특정 측면에만 패딩을 설정하려는 경우 , 다음 네 가지 속성을 통해서만 이를 수행할 수 있습니다:

padding-top

padding-right

padding-bottom

padding-left

이름에서 알 수 있듯이 이해하기 쉽습니다.

숫자 값 설정에는 앞서 언급한 것처럼 다양한 단위를 사용할 수 있으며, 일반적으로 사용되는 단위는 픽셀(px)과 센티미터(cm)입니다. 이는 비교적 간단하므로 간단하게 테스트해 보세요. :

html 파일에 테이블을 작성하고 테두리 속성을 추가합니다:

<table border="1">
    <tr>
        <td>
            正文
        </td>
    </tr>
</table>

설정 전 페이지입니다:

이제 CSS 파일에

h1 {
    padding-left: 5cm;
    padding-right: 5cm;
    padding-top: 30px;
    padding-bottom: 30px;
}

를 추가하고 HTML 코드를 다음과 같이 업데이트합니다.

<table border="1">
    <tr>
        <td>
            <h1>正文</h1>
        </td>
    </tr>
</table>

다음은 효과의 스크린샷입니다.

우리가 운영하는 영역은 문자 밖, 경계 내부임을 알 수 있습니다.