CSS.08. Margin & Padding

margin: 두 박스 모델 사이의 여백

padding: 한 박스 모델에서 테두리와 내용 사이의 여백

 

margin 속성

요소 주변의 여백을 설정

>>요소와 요소 사이의 간격을 조절

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

 

margin 속성

<크기>	너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정	margin: 50px
<백분율>	박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정	margin: 0.1%
auto	display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정

 

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

>> 배치할 요소의 너빗값 지정

좌, 우 마진을 auto로 지정

 

margin 상쇄

위 아래 마진이 서로 만날 경우 마진이 큰 값에 작은 값이 병합되어 사라짐

주의) 좌우 마진이 만날경우엔 X

 

padding 속성

콘텐츠 영역과 테두리 사이의 여백 설정

>>테두리 안쪽의 여백

지정하는 방식은 마진과 동일