CSS margin

margin이란?

margin 속성은 요소의 바깥쪽 여백을 설정합니다.

length || % || auto

  • length : 여백의 크기로 고정값 사용.
  • % (percentage) : 여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
  • auto : 브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.

정리

margin-top: 10px;                    /* 요소의 위쪽 바깥쪽 여백을 설정 */
margin-right: 11px;                  /* 요소의 오른쪽 바깥쪽 여백을 설정 */
margin-bottom: 12px;                 /* 요소의 아래쪽 바깥쪽 여백을 설정 */
margin-left: 13px;                   /* 요소의 왼쪽 바깥쪽 여백을 설정 */
margin: 10px;                       /* 모든방향 */
margin: 10px 11px;                  /* 위,아래   ||   왼쪽,오른쪽 */
margin: 10px 11px 12px;             /* 위   ||   왼쪽,오른쪽   ||   아래 */
margin: 10px 11px 12px 13px;        /* 위   ||   오른쪽   ||   아래   ||   왼쪽 */
margin: auto;                       /* 자동값, 기본값 */
margin: 0 auto;                     /* 가운데 정렬(블록구조) */