margin : 요소의 외부 여백

요소의 외부 여백(공간)을 지정하는 단축 속성
음수 사용가능

margin: 0;

• 값 1개
  margin: 10px;
  
• 값 2개
  margin: 10px 20px;
  
• 값 3개
  margin: 10px 20px 30px;
  
• 값 4개
  margin: 10px 20px 30px 40px;
  
  

margin-방향

• margin-top
• margin-bottom
• margin-left
• margin-right

padding : 요소의 내부 여백

요소의 내부 여백(공간)을 지정하는 단축 속성
내부에 여백이 추가된 만큼 요소의 크기가 커진다!! (중요)

padding: 0;

• 값 1개
  padding: 10px;
  

  요소의 크기가 커졌다

• 값 2개
  padding: 10px 20px;
  

• 값 3개
  padding: 10px 20px 30px;
  

• 값 4개
  padding: 10px 20px 30px 40px;
  

개념은 margin과 동일
방향도 동일

padding-방향

• padding-top
• padding-bottom
• padding-left
• padding-right