CSS · HTML
CSS 태그 : margin
혜원21
2019. 9. 17. 01:55
*
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으로 정렬된 절대적, 상대적 위치의 박스 마진은 겹치지 않습니다.