[CSS] margin과 padding의 차이

개발자 도구에 있는 사진

 

 

margin

• border의 바깥쪽 여백
• content의 영향을 받지 않는다
• 주변 요소와 거리를 두기 위핸 여백이다
• auto, 음수는 margin만 가능하다
  • auto: 중앙에 배치, 좌우 균형은 균등하게 배치된다

 

 

 

 

 

padding

• content와 border 사이의 여백을 나타내는 영역
• padding 역시 content의 일부라고 볼 수 있다
  • (예) background color가 존재하면 padding 영역도 영향을 받는다
• auto X / 음수 X

 

 

 

 

 

margin과 padding 사용법

1. 속성 4개 : 시계방향(위, 오른쪽, 아래, 왼쪽) 순서
2. 속성 2개 : 첫번째 값은 위와 아래 / 두번째 값은 오른쪽과 왼쪽 여백을 의미
3. 속성 1개
   • 위, 오른쪽, 아래, 왼쪽 모두 같은 값을 사용하게 된다
   • padding은 안쪽 여백이 변경된다
4. 단일 속성
   • 위, 오른쪽, 아래, 왼쪽 중 하나에만 값을 부여하고 싶은 경우에는 방향을 설정해주면 된다
   • (ex) margin-top: 20px;