박스의 위치

박스의 위치

margin: px, %

• 바깥 여백을 의미

• 벽을 밀어서 자신이 이동하거나 주변의 다른 요소를 밀어내는 효과.

• 서로 마주보고 작용하는 margin은 겹침 현상 발생.

• 음수 값을 지정할 경우 반대 방향으로 힘이 작용(끌어당김).

• 값을 하나만 지정할 경우 : 상,하,좌,우 모두 동일

• 값을 두 개 지정할 경우 : 상/하, 좌/우

• 값을 네 개 지정할 경우 : 상단부터 시계방향 회전

margin:auto

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

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