CSS margin

margin

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

문법

margin : length | % | auto

정의

  • margin-top 속성은 요소의 위쪽 바깥쪽 여백을 설정
  • margin-right 속성은 요소의 오른쪽 바깥쪽 여백을 설정
  • margin-bottom 속성은 요소의 아래쪽 바깥쪽 여백을 설정
  • margin-left 속성은 요소의 왼쪽 바깥쪽 여백을 설정
  • margin: 10px; 위,오른쪽,아래,왼쪽 : 10px 시계방향으로 갑니다.
  • margin: 10px 11px; 위,아래:10px 왼쪽,오른쪽:11px
  • margin: 10px 11px 12px; 위:10px 왼쪽,오른쪽:11px 아래:12px
  • margin: 10px 11px 12px 13px; 위:10px 오른쪽:11px 아래:12px 왼쪽:13px
  • margin: auto; 자동값, 기본값
  • margin: 0 auto; 가운데 정렬(블록구조) 인라인 구조에서는 text-align이나 center를 사용합니다.

margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다.


margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 13px;
margin: 10px; /* 위,오른쪽,아래,왼쪽 : 10px */ 시계방향으로 갑니다.
margin: 10px 11px; /* 위,아래:10px 왼쪽,오른쪽:11px */
margin: 10px 11px 12px; /* 위:10px 왼쪽,오른쪽:11px 아래:12px */
margin: 10px 11px 12px 13px; /* 위:10px 오른쪽:11px 아래:12px 왼쪽:13px */
margin: auto; /* 자동값, 기본값 */
margin: 0 auto; /* 가운데 정렬(블록구조) */ 인라인 구조에서는 text-align이나 center를 사용합니다.
/