CSS에서 각 방향의 패딩 여백

외부 여백과 마찬가지로 내부 여백에도 각 방향별 속성이 있습니다: padding-left, padding-right, padding-top, 그리고 padding-bottom. 그들의 작동 방식을 살펴봅시다:

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

css#elem {
  padding-top:    10px; /* 위쪽 */
  padding-right:  20px; /* 오른쪽 */
  padding-bottom: 30px; /* 아래쪽 */
  padding-left:   40px; /* 왼쪽 */
  
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: