본문으로 건너뛰기
실습하기

여백의 방향 정하기

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

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!