margin

• 요소의 외부 여백을 지정하는 속성
• auto : 브라우저가 여백을 자동으로 설정. 가운데 정렬이라고 보면 된다. (단, 블록 요소여야 하며 가로 또는 세로 사이즈가 설정돼 있어야 한다.)
• 음수를 사용할 수 있다.
• margin-top, margin-bottom 과 같이 어느 방향에 여백을 줄지 결정할 수 있다.

margin: 10px 20px;

• 위와 같이 작성되면 top, bottom의 방향으로 10px 만큼의 여백이 생기고 left, right 방향으로 20px 만큼의 여백이 생긴다.

margin: 10px 20px 30px;

• 위와 같이 작성되면 top 의 방향으로 10px 만큼, left, right 방향으로 20px 만큼, bottom 방향으로 30px 만큼의 여백이 생긴다.

margin: 10px 20px 30px 40px;

• 위와 같이 작성되면 순서대로 top, right, bottom, left의 방향으로 각각 10px, 20px, 30px, 40px 만큼의 여백이 생긴다.

padding

• 요소의 내부 여백을 지정하는 속성
• 요소의 크기가 커진다고 볼 수 있다.
• % : 부모 요소의 가로 너비에 대한 비율로 지정