[CSS] margin과 padding 이해하기

 

margin과 padding

• margin은 각 요소들 사이의 여백을,
• padding은 하나의 요소에서 컨텐츠와 border 사이의 여백을 의미한다.

margin과 padding의 이해

 

1. margin

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

 

예시 (1) 

h1 {
  margin-left: 15px;
}

Q. 이 때 나머지 속성값은 어떤가? 

A. 해당 태그에 기본적으로 설정돼있는 margin을 유지한다. 

✅ 참고로 <h1> 태그는 기본적으로 margin-top과 magin-bottom이 21.440px이다.

 

 

예시 (2)

h1 {
  margin-top: 15px;
}

Q. 이 때 나머지 속성값은 어떤가?

A. <h1> 태그의 margin-top이 15px로 설정되고, 앞서 말했듯이 기본값인 margin-bottom: 21.440px이 유지된다.

 

 

예시 (3)

h1 {
  margin: 15px;
}

Q. 각각의 margin 속성값은 어떤가?

A. margin 속성에서 1개의 값만 지정하면 4방향의 margin이 모두 15px로 설정된다.

 

 

예시 (4)

✅ 값을 여러 개 지정할 때, 값들 사이는 공백으로 분리한다.

h1 {
  margin: 10px 20px;
}

Q. 각각의 margin 속성값은 어떤가?

A. margin 속성에서 값을 여러 개 지정해줄 경우, 차례대로 top → right → bottom → left 순서대로 값이 지정된다.

주의할 점은 margin 값을 2개 이상 설정했을 때, 값이 설정되지 않은 margin은 평행한 쪽 margin의 값을 자동 부여받는다.

여기서 차례대로 2개의 값을 지정했으므로 다음 코드와 동일한 결과이다.

 

h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

 

 

예시 (5)

h1 {
  margin: 5px 10px 15px 20px;
}

Q. 각각의 margin 속성값은 어떤가?

A. 다음 코드와 동일한 결과이다.

 

h1 {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

 

 

 

2. padding

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

 

padding도 마찬가지로 padding 속성으로 한 번에 설정하거나, pardding-top, padding-right, padding-bottom, padding-left로 따로 설정해줄 수 있다.