CSS - 7. Margin과 Padding

1. Margin과 Padding

margin과 padding라는 property는 요소의 여백을 스타일할 수 있다. 

모든 요소는 옆 그림과 같이 margin, border, padding의 스타일을 갖고 있다.

주황색은 margin 영역으로, 위, 오른쪽, 아래, 왼쪽에 모두 50px를 차지하고, 

노란색은 border 영역으로, 보더의 두께는 5px이다.

초록색은 padding 영역으로, 위, 오른쪽, 아래, 왼쪽에 모두 50px를 차지하고,

요소의 가로는 273px, 세로는 90px이다. 

요소에 border 스타일을 주면 테두리가 그려진다. padding은 border 내에 생기는 영역이다.

그림에서 273px이라는 가로값은 padding 영역이 합쳐진 가로길이이다. 그리고 margin은 border 외부에 생기는 여백이다. 두 번째 사진처럼 margin(주황색)까지 합쳐진 가로길이는 총 373px이다. → 273 + 50(왼쪽margin) + 50(오른쪽 margin) = 373px

순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 163px이다. ↓

273 - 50(왼쪽패딩) - 50(오른쪽 패딩) - 5(왼쪽 테두리) - 5(오른쪽 테두리) = 163px

p.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;
}

 

---

2. margin

테두리 바깥의 여백이 margin이다.

p.example {
  margin: 50px;
}

css를 이용해 위와같이 마진 값을 50px 만들 수 있다. 위 코드를 풀어서 쓰면 

p.example {
  margin: 50px 50px 50px 50px;
}

이렇게 쓸 수 있다. 순서대로 위, 오른쪽, 아래, 왼쪽의 여백 값이다. 한번 더 풀어쓰면

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

이렇게도 쓸 수 있다.

 

---

3. padding

테두리 안 쪽의 초록색 영역이 padding이다. padding도 margin과 비슷하게 작성한다.

p.example {
  padding: 50px;
}

padding 또한 50px 값 하나만 주어도 테두리 내부에 50px 영역이 생긴다. 위와 같이

p.example {
  padding: 50px 50px 50px 50px;
}

// 한번 더 풀어쓰면 

p.example {
  padding-top: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

50px 한번으로 위 코드와 같이 적용되는 것을 알 수 있다. 순서 또한 위와 똑같이 위, 오른쪽, 아래, 왼쪽 순이다.