CSS : margin과 padding 내용 정리하기

 

 

구조 살펴보기 : 

 

1. Content(내용) 영역 

요소의 실제 컨텐츠가 들어가는 부분이다. 

텍스트, 이미지, 비디오 등등 콘텐츠가 포함될 수 있다. 

 

2.Padding (안쪽 여백)

콘텐츠와 테두리(border)사이의 여백이다 

요소의 배경색이 적용된다.

 

3.Border(안쪽 여백)

요소의 경계선이다

 

4.Margin(바깥 여백)

요소와 다른 요소 사이의 공간으로 외부여백이다 

요소의 배경색이 적용되지 않으면 margin끼리 중첩이 될 수 있다. 

 

 

margin: 0 auto;는 CSS에서 요소를 수평으로 가운데 정렬하는 데 사용된다 

margin -은 위쪽과 아래쪽 여백을 0으로 정하고 

왼쪽과 오른쪽 여백은 자동으로 설정된다

자동으로 할당된 여백은 사용 가능한 공간을 균등하게 나눈다.