padding 속성

padding 속성은 요소의 내부 여백을 설정합니다. 속성 값으로는 크기 단위를 사용할 수 있습니다. 기본적으로 각 브라우저는 요소에 다양한 여백을 추가할 수 있습니다. 이 속성은 padding-top, padding-right, padding-bottom, padding-left 속성에 대한 단축 속성입니다.

문법

css선택자 {
  padding: 값;
}

매개변수 개수

padding 속성은 1개, 2개, 3개 또는 4개의 값을 공백으로 구분하여 받을 수 있습니다:

예시

이 경우 기본적으로 내부 여백은 0이며 텍스트가 블록 경계에 붙어 있을 것입니다:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

예시

이제 30px의 내부 여백을 만들어 보겠습니다:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

예시

이제 위쪽과 아래쪽 여백은 20px, 오른쪽과 왼쪽은 5px가 될 것입니다:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

예시

이제 위쪽 여백은 5px, 오른쪽 - 15px, 아래쪽 - 25px, 왼쪽 - 35px입니다:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

함께 보기