08-3 여백을 조절하는 속성

두 박스 모델 사이의 여백은 마진, 한 박스 모델에서 테두리와 내용 사이의 여백은 패딩이라고 함

마진과 패딩은 웹 문서에서 여러 가지 요소를 배치할 때 자주 쓰는 속성이므로 꼭 기억해둘 것!!!

 

>>>요소 주변의 여백을 설정하는 margin 속성

마진은 요소 주변의 여백을 의미함. 따라서 마진을 이용하면 요소와 요소 사이의 간격을 조절할 수 있음.

[기본형] margin: <크기> | <백분율> | auto

 

알아두면 좋아요!

개발자 도구 창에서 마진 확인하기 : F12

 

>>> margin 속성을 사용하여 웹 문서를 가운데 정렬하기

웹 문서 전체를 화면 중앙에 배치가능

 

>>> 마진 중첩 이해하기

박스 모델에서 마진을 지정할 때 주의해야 할 것이 있음.

요소를 세로로 배치할 경우에 각 요소의 마진과 마진이 서로 만나면 마진값이 큰 쪽으로 겹쳐지는 문제인데,

이런 현상을 마진 중첩 또는 마진  상쇄라고 함.

마진 중첩은 아래 마진과 위 마진이 서로 만날 때 큰 마진값으로 합쳐지는 것임

오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않음.

 

>>> 콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

패딩 : 콘텐츠 영역과 테두리 사이의 여백을 말함

패딩과 마진은 여백이 어느 위치에 있느냐만 다를 뿐 박스 모델에서 패딩을 지정하는 방법은 마진과 거의 같음.

 

# 마진을 사용하여 내용 전체를 화면 중앙으로 옮기는 방법은 자주 사용하므로 꼭 기억해두자.