속성의 사용 방법이나 속성값의 적용 원리는 margin 영역과 똑같으니 6.3.1 margin 영역을 참고하면 됩니다. 여기서는 예시 하나만 살펴보고 넘어가겠습니다.

다음 코드는 p 태그에 border 속성과 padding 속성을 적용합니다.

p{
  border:1px solid black;
  padding:10px;
}

그림 6-31 실행결과

코드를 실행해 개발자 도구로 p 태그를 선택합니다. 그 상태로 박스 모델을 보면 주황색이 margin, 초록색이 padding, 파란색이 content 영역입니다. 여기서 초록색의 padding 영역은 박스 모델에서 margin, border 영역보다 안쪽에 있으므로 테두리 안쪽에 여백이 지정됨을 확인할 수 있습니다.