여백(마진, 패딩) 관련 속성들

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1. margin 속성
• 2. padding 속성

 

<여백 관련 속성들>

개발자 도구 창에서 margin과 padding의 수치를 확인할 수 있다.

 

1. margin 속성

margin은 현재 요소 주변의 여백이다. 

선택자 { margin: 크기 | 백분율 | auto }
선택자 { margin-top: 크기 | 백분율 | auto }
선택자 { margin-bottom: 크기 | 백분율 | auto }
선택자 { margin-right: 크기 | 백분율 | auto }
선택자 { margin-left: 크기 | 백분율 | auto }

 

1) margin속성의 속성값 개수

margin속성을 이용해 마진 값을 한꺼번에 설정할 때는 값의 개수에 따라 어느 방향에 적용될지 결정된다.

속성 값 개수	적용되는 범위, 방향
1개	네 방향 모두
2개	위아래, 좌우
3개	위, 좌우, 아래
4개	시계방향(위쪽, 오른쪽, 아래쪽, 왼쪽)

 

2) 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse) 현상

• 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐진다.
• 요소를 가로로 배치할 경우에는 오른쪽 마진과 왼쪽 마진이 그대로 유지되어 나타난다.

 

---

2. padding 속성

padding은 콘텐츠 영역과 테두리 사이의 여백이다. 다시말해, 테두리 안쪽의 여백을 말한다.

선택자 { padding: 크기 | 백분율 | auto }
선택자 { padding-top: 크기 | 백분율 | auto }
선택자 { padding-bottom: 크기 | 백분율 | auto }
선택자 { padding-right: 크기 | 백분율 | auto }
선택자 { padding-left: 크기 | 백분율 | auto }