우리가 자주 쓰는 margin과 padding! 아주 기초적이지만, 이 두가지가 가끔 헷갈릴때가 있다. 깔끔하게 정리해보자.

*참고사이트: https://aboooks.tistory.com/327*

margin은 바깥쪽 여백, padding은 안쪽 여백을 의미한다.

이 두 가지의 개념은 border를 경계로 나누어지게 된다.

이렇게 보면 뭐가 헷갈리지? 라고 생각이 들지만

box-sizing 에 대해 좀 더 적어보려고 한다.

일반적으로 우리가 width라고 했을때에는 content만을 의미하게 된다.

이는 c**s에 있어 매우 불편하다. padding과 margin등을 고려하지 않아

이곳 저곳으로 삐져 나가기 때문이다.

이럴때 유용한 것이 바로, box-sizing: border-box 이다.

이를 적용하게 되면, width에 content, padding, boder 넓이 까지 모두 포함되기 때문에 직관적으로 적용이 편하다.**

자세한 내용은 아래의 사이트에서 눈으로 보면서 실험해보기 바란다. https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing