CSS에서 padding 여백 다루기

우리는 테두리 바깥쪽으로 여백을 만드는 속성 margin을 살펴보았습니다. 테두리 안쪽으로 여백을 만드는 매우 유사한 속성 padding도 있습니다.

이제 예제를 통해 이 속성이 어떻게 작동하는지 살펴보겠습니다. 먼저 여백이 없는 블록(텍스트가 경계에 붙어 있음)을 보여드리겠습니다:

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

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

Результат:

이제 모든 면에 padding을 30px로 설정해 보겠습니다:

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

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

Результат: