[ HTML5 ] Margin 과 Padding의 차이점

Margin 과 Padding 모두 컨텐츠 간의 공간을 만들기 위해서 사용되는 속성입니다. 

전 지금 까지 margin과 padding을 구분 없이 막 사용 했습니다.

하지만, Layout을 만들 때 먼가 생각대로 표현이 안될 때가 있어 이렇게 조사한 내용을 올립니다.

먼저, 제가 이해한 Margin과 Padding의 설명입니다.

Margin : 컨텐츠들 간의 공간을 생성 (ex> 버튼과 버튼 사이, 이미지와 이미지 사이 등등)
Padding : 컨텐츠 안에 공간이 더 필요할 때 ( ex> Table 안쪽 공간 확보 등등)  

 
출처: http://song4u.info/238 
 
HTML5를 공부하면서 간단하게 이해가 확 오는 예제를 만들어 보았습니다.

 

보시는 면 바로 아!!!! 아시죠??ㅎㅎ

Padding 은 border(테두리) 안쪽에서 컨텐츠의 공간을 확보해주는 역할을 하구요.
Margin은 border(테두리) 의  바깥 쪽에서 공간을 벌려주는 역할을 합니다.

 
역시 모르는 것은 이렇게 확실히 알고 보면 간단한 거네요~~ ㅎㅎ

결과가 나온다고 끝나는 것보단 그 원리를 파악해 나가는 것도 

하나의 스킬이라고 보이네요^^

그럼 오늘도 즐코딩 하세요~

(위 소스는 첨부해놓겠습니다.)

Sample.zip