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

여백(Margin)

CSS에서 margin은 요소의 외부 여백을 의미합니다. margin 요소와 그 주변의 다른 요소들 사이의 공간을 생성합니다.

margin은 요소의 실제 크기에 영향을 주지 않습니다.


개별 여백 설정​

margin은 4개의 하위 속성으로 나뉩니다.

  • margin-top : HTML 요소의 상단 여백 설정

  • margin-right : HTML 요소의 오른쪽 여백 설정

  • margin-bottom : HTML 요소의 하단 여백 설정

  • margin-left : HTML 요소의 왼쪽 여백 설정


margin 속성 사용 예시
div {
  margin-top: 10px; /* 상단 여백: 10px */
  margin-right: 20px; /* 오른쪽 여백: 20px */
  margin-bottom: 10px; /* 하단 여백: 10px */
  margin-left: 20px; /* 왼쪽 여백: 20px */
}

상하좌우 여백 한 번에 지정​

margin 속성만으로 모든 방향의 여백을 한 번에 설정할 수 있습니다.


한 방향 설정​

한 방향만 설정하려면, margin 속성에 숫자 하나만 입력합니다.

한 방향 설정 예시
div {
  /* 모든 방향에 10px의 여백 설정 */
  margin: 10px;
}

수직 및 수평 설정​

수직 및 수평 여백을 설정하려면, margin 속성에 2개의 숫자를 입력합니다.

수직 및 수평 설정 예시
div {
  /* 위/아래 여백: 10px, 좌/우 여백: 20px */
  margin: 10px 20px;
}

개별 방향 설정​

모든 방향을 개별적으로 설정하려면, margin 속성에 4개의 숫자를 입력합니다.

CSS
div {
  /* 위쪽, 오른쪽, 아래쪽, 왼쪽 여백: 10px, 20px, 30px, 40px */
  margin: 10px 20px 30px 40px;
}

margin: auto와 중앙 배치​

margin: auto는 HTML 요소를 가로 방향으로 중앙에 배치합니다.


가로 중앙 배치​

블록 수준 요소(예: div)를 가로축으로 중앙 정렬하려면, 해당 요소에 너비(width)를 지정하고 margin 속성을 0 auto로 설정합니다.

CSS
div {
  width: 100px; /* 너비 지정 */
  margin: 0 auto; /* 가로축으로 중앙 정렬 */
}

세로 중앙 배치​

margin: auto만으로는 HTML 요소를 세로축으로 중앙 정렬할 수 없습니다. 세로 중앙 정렬은 뒤에 설명할 Flexbox나 Grid와 같은 레이아웃을 활용해야 합니다.

다음 내용이 궁금하다면?

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