[HTML] margin vs padding

노란색 영역의 글씨와

파란색 영역의 글씨 사이 간격을 주고 싶은데

 

이때 margin-bottom 값을 줘야 하는지

padding-bottom 값을 줘야 하는지 헷갈림

 

대체 margin과 padding의 차이가 뭔데

 

객체의 내부 여백이 padding이고

외부 여백이 margin인건 알겠고

 

object, padding, margin까지 그리라면 그릴 수 있는데

근데 어떨 때 margin을 쓰고 padding을 쓰는지가 헷갈린다.

 

---

 

 

margin : border 바깥쪽 영역 차지, 주변 요소와 거리감을 주기 위함

padding : border 안쪽 영역 차지, padding 값으로 인해 컨텐츠 영역에 영향을 미칠 수 있음 (content의 연장 개념)

 

* margin만 적용 가능

1. 음수값

2. auto

 

---

1. margin-top : 5px;

파란색 영역의 margin-top의 값을 5px 준 결과물이다.

 

content의 영역의 크기는 바뀌지 않았지만

content 영역 밖의 margin 영역은 5px 추가된 형태를 띄고 있어

결과적으로 노란색 영역과 파란색 영역의 5px 크기의 공백이 추가되었다.

 

 

2. padding-top : 5px;

파란색 영역의 padding-top의 값을 5px 준 결과물이다.

 

margin-top의 값을 지정해준 것과 달리, content의 영역의 크기가 바뀌었다.

content 영역 내의 padding 영역이 5px 추가된 형태를 띄고 있어

결과적으로 노란색 영역과 파란색 영역의 5px 크기의 공백이 추가된 것처럼 보이지만

실제로는 content 자체의 크기가 바뀌었다.

---

 

내가 원하는 것은 content의 크기 자체를 변형시키기 보다는

content의 내용을 변형시키지 않으면서 노란색 영역과의 거리를 5px만큼 두는 것이다.

 

padding-top의 값을 지정해줄 경우, content 내용 자체의 크기가 달라지게 되며

반대로 margin-top의 값 지정 경우, content 내용 자체는 달라지지 않으나 content 영역과 노란색 영역과의 공백이 생겨나게 된다.

 

따라서 이같은 케이스에는

margin-top의 값을 지정해주는 것이 더 나아보인다.

 

---

 

 

최종적으로 margin-top의 값을 지정해준 결과물이다.

 

content의 내용 크기가 변형되지 않으면서도

원하는 곳에 원하는 크기의 여백을 넣을 수 있었다.