[CSS] Margin 속성

by 호쌤(이광호) on March 14, 2022

margin은 바깥 여백을 의미하는 속성입니다. 사람이 벽에 기대어 있는 상태에서 벽을 밀 경우 사람이 밀려나게 되듯이 박스의 바깥에 여백을 형성하면 그 여백의 크기만큼 박스가 밀려나게 됩니다. padding은 박스의 크기에 관여하는 속성이지만 margin은 박스의 위치에 관여하는 속성입니다.

#01. 기본 특성 (박스의 위치 설정)

박스는 기본적으로 브라우저의 좌측 상단에 배치된다. 이 상태에서 박스의 위쪽과 왼쪽 바깥에 여백이 형성된다면 벽면을 밀어내기 때문에 결국 박스 자신이 반대로 밀려나게 된다.

여백이 작용하는 방향에 다른 박스가 존재한다면 다른 박스를 밀어낸다.

음수값을 설정할 경우 다른 요소를 끌어당기는 특성을 갖는다.

즉, 자신이나 다른 박스의 위치에 영향을 주는 속성이다.

#02. 값을 설정하는 형식

padding 속성과 동일한 방법으로 기술한다.

1) 기술하는 값에 따른 구분

구분	설명	예시
하나의 값	상,하/좌,우 모두 같은 값이 부여된다.	margin: 10px;
두 개의 값	첫 번째 값은 상,하를 의미. 두 번째 값은 좌,우를 의미한다.	margin: 10px 20px;
네 개의 값	상단부터 시계방향으로 회전하면서 부여	margin: 10px 20px 30px 40px;

2) 위치에 따른 속성 구분

아래의 속성들은 단 하나의 값만을 갖는다.

속성	설명
margin-left	왼쪽 여백
margin-right	오른쪽 여백
margin-top	상단 여백
margin-bottom	하단 여백

#03. margin 속성의 특성

1) margin 겹침 현상

두 요소가 서로 마주보는 방향으로 margin이 작용할 경우 margin 값이 겹쳐진다.

2) 박스의 정렬에 관여

부모박스 안에서 자식 박스의 위치를 설정하고자 하는 경우 margin으로 설정해야 한다.

margin-left를 사용하면 박스가 왼쪽에서 margin값 만큼 떨어지게 된다.

이 현상을 활용하여 박스가 중앙에 배치되도록 margin-left를 부여한다.

3) margin: auto

부모요소의 width에서 현재 자신의 크기를 뺀 나머지를 자동으로 계산하여 margin에 부여한다.

속성	설명
margin-left: auto	박스가 부모의 오른쪽에 배치된다.
margin-right: auto	박스가 부모의 왼쪽에 배치된다. (기본값)
left와 right에 모두 auto적용	박스가 부모의 가운데 배치된다.
margin: auto	값이 하나인 경우 상,하,좌,우 모두 적용되지만 auto는 상,하에 대해서는 동작하지 않기 때문에 left, right에만 부여한 것과 동일하게 작용한다.