6-3. CSS margin, padding

1. margin 

margin 은 요소 주변의 여백을 의미한다. 

따라서 마진을 이용하면 요소와 요소 사이의 간격을 조절한다. 

margin : <크기> | <백분율> | auto 

 

이때에도 top, right, bottom, left 순으로 값을 지정하니까 순서를 잘 알고 있어야 한다. 

 

그리고 개발자 도구에서 이를 좀 더 자세히 확인할 수 있으니 거기서 참고하기!

 

margin을 이용해서 웹 문서를 가운데로 정렬할 수 있다. 

배치할 요소의 크기가 정해져 있고, margin-left와 margin-right 속성값을 auto로 지정해주면 된다!

 

가운데로 정렬됨.

 

그리고 마진이 겹쳐지는 현상을 마진 중첩 이라고 한다. 

 

 

 

 

2. padding 

padding 이란 콘텐츠 영역과 테두리 사이의 여백을 말한다. 

padding 역시 개발자 도구에서 보는게 정확히 볼 수 있다.