본문 바로가기
웹코딩 배우기/· 태그 사전

CSS 태그 : margin

by 닐기 2019. 9. 17.

margin
요소의 바같쪽 여백을 설정

 

 

margin은 margin-top, margin-right, margin-bottom, margin-left 모든 값을 가지고 있습니다. 

 

{margin: 50px;} 상-우-하-좌 

{margin: 50px 60px;} 상하-좌우 

{margin: 50px 60px 30px;} 상-좌우-하 

{margin: 0 auto;} 상하-중앙정렬

 

위 값의 순서는 기억하기 어려우니 그냥 {margin: 0 0 0 0;} 상우하좌 하나만 기억하면 됩니다.

값은 px, %, auto를 쓸 수 있습니다.

 

▲ 마진 값을 가진 박스의 상하 마진 값은 겹칩니다. 상하 마진 값이 큰쪽으로겹치게 됩니다.
마진은 음수, 양수 값을 가질 수 있고 합산한 마진 값을 적용합니다.

▲ float으로 정렬된 절대적, 상대적 위치의 박스 마진은 겹치지 않습니다.

반응형

댓글0