css - padding, margin 차이

http://www.w3schools.com/css/css_boxmodel.asp

마진이나 패딩이나
둘다 여백을 주는 방식이다.

그차이는 border부분을 기준으로 했을때
내부에 줄것인가 외부에 줄것이냐의 차이다.



크기 200px 짜리에 분홍색 박스안에
테스트를 하기위한 분홍색박스의 절반크기인 100px 짜리 회색 박스를 집어넣었다.

그리고 padding과 margin을 텍스트박스크기만큼 집어넣었다.
(top, right, bottom, left 모두 50px)

padding은 border내부에 여백을 채우느라 상위 박스크키만큼 커져버렸고,
margin은 border외부의 여백을 조정하다보니 정가운데 위치하게됬다.

그리고, 잘보면 padding과 margin의 텍스트 위치는 동일하다.
즉 이 border 내부의 content는 아직까지 모두 100px이다
content의 위치나 사이즈가 변하는건 아니다.
그리고 만약 분홍색, 회색박스가 모두 흰색이고 둘다 border는 0px로 하여
안보이게 했다면 여기서는 전혀 차이가 없을 수도 있다.