CSS, padding과 margin차이

padding

padding은 안쪽 여백 영역을 설정한다.

margin

margin은 바깥쪽 여백 영역을 설정한다.

차이를 알아보기

기본 div

body {
  padding: 0;
  margin: 0;
  background-color: blue;
}

div {
  width: 100px;
  background-color: red;
  border: 1px solid black;
  text-align: center;
}

결과

기본에서 margin만 추가

body {
  padding: 0;
  margin: 0;
  background-color: blue;
}

div {
  width: 100px;
  background-color: red;
  border: 1px solid black;
  text-align: center;
  
  margin: 10px;
}

결과

설명

div박스의 바깥쪽이 10px만큼 늘어났다.

기본에서 padding만 추가

body {
  padding: 0;
  margin: 0;
  background-color: blue;
}

div {
  width: 100px;
  background-color: red;
  border: 1px solid black;
  text-align: center;
  
  padding: 10px;
}

결과

설명

div박스의 안쪽이 10px만큼 늘어났다.

기본에서 padding만 추가

body {
  padding: 0;
  margin: 0;
  background-color: blue;
}

div {
  width: 100px;
  background-color: red;
  border: 1px solid black;
  text-align: center;
  
  padding: 10px;
  margin:10px;
}

결과

설명

div박스의 안쪽과 바깥쪽 둘다 10px만큼 늘어났다.

결론

위의 그림처럼 가장 바깥쪽부터 margin -> border -> padding순서대로 너비를 차지한다.