html 엘리먼트들의 간격을 조절할때 가장 많이 사용되는 속성이 margin과 padding입니다.
레이아웃에 가장많이 영향을 주는 속성이기 때문에 많이 사용되므로 사용용도를 잘 알고있어야합니다.

margin
엘리먼트와 엘리먼트 사이의 간격을 지정합니다. 아래 그림과 같이 border 바깥의 영역이기 때문에 배경색을 가지고 있지 않습니다.


padding
엘리먼트 내부공간의 간격을 지정합니다. 아래 그림과 같이 border 안쪽 영역이기 때문에 배경색을 가지고 있습니다.

그리고 하나의 특징은 내부 공간을 영역이기 때문에 속성의 값을 넣으면 가로사이즈가 값만큼 늘어납니다.
예) width:100px; padding: 10px; 속성을 가지고 있는 블럭의 가로사이즈는 120px가 됩니다.


- 값
margin값은 수치와 단위를 조합한 값을 사용합니다. margin: 15px;

- 여러가지의 값 넣기
margin과 padding은 총 4개의 값을 넣을 수 있습니다. 이 값들은 4방향을 의미합니다. (상,우,하,좌)
예) margin : top right bottom left;

.box {

 margin: 10px 20px 30px 40px;

 padding: 10px 20px 30px 40px;

}

- margin을 이용하여 가로 500px의 박스를 중앙정렬하기
기본적으로 div 같은 block속성의 엘리먼트는 기본적으로 왼쪽 정렬이 됩니다. 이것을 중앙정렬 처리하려면 margin: 0 auto; 속성을 넣어주면 됩니다.

.center_box {margin: 0 auto}