여백의 방향 정하기

margin과 padding은 top(위), bottom(아래), left(왼쪽), right(오른쪽)을 통해 특정 방향으로만 여백을 줄 수 있습니다.

top, bottom, left, right은 각각 편지지의 상단, 하단, 왼쪽, 오른쪽 부분에 해당하는 여백을 뜻합니다.

복사
.box {
  margin-top: 10px; /* 위쪽 여백 10px */
  padding-bottom: 20px; /* 아래쪽 여백 20px */
  margin-left: 10%; /*  box 클래스가 적용되는 요소 가로 길이의 10%만큼 왼쪽 여백 추가  */
}