CSS의 Margin, Padding, Border 개념을 명확하게 하자

90년대 후반부터 HTML을 시작한 분들은 CSS 보다는 <table> 태그와 <font> 태그를 활용해서 HTML을 작업하는데 익숙해 있기는 합니다. 
그래서인지 CSS에 대해서 명확하게 이해하지 못하고 있는 부분들이 있는 것 같습니다.

특히 Margin과 Padding과 같은 부분에 대해서 가끔 헤깔려 하는 것 같아서 정리해 보려고 합니다. 

위 그림을 보면 Margin, Border, Padding에 대해서 잘 나와 있습니다. 

Border는 경계선으로 실제 콘텐츠를 감싸고 있는 선으로 스타일, 색, 두께를 지정할 수 있습니다.
콘텐츠 부분과 다르게 보이도록 하기 위해서 페이지의 배경색과 다른 색을 사용하기도 합니다. 

Padding은 Border 안쪽에 위치하는 여백으로 콘텐츠에 대한 공간을 지정하는 것입니다.
Padding 공간의 배경색은 콘텐츠의 배경색을 따르게 되어 있습니다.

Margine은 Border 바깥쪽에 위치하는 여백으로 부모 엘리먼트와 해당 콘텐츠 사이의 여유 공간을 확보하는데 사용합니다.

각 부분마다 Padding, Border, Margin의 상하좌우를 독립적으로 설정할 수 있어 많은 유연성을 줄 수 있다고 합니다.
설정값은 픽셀이나 em 단위를 사용할 수 있다고 하는데요.
em 단위를 사용하면 현재 사용하는 폰트 사이즈를 기준으로 글자의 너비와 높이를 비율적으로 정의하게 됩니다.
그래서 픽셀 대신 em으로 정의하면 사용하는 문자의 크기에 따라 자동적으로 콘텐츠 블록의 크기가 늘어나기 때문에 사용자에게 더욱 유연한 블록을 제공할 수 있습니다.

또한 CSS가 제대로 작성되어 있는지 검사하는 사이트가 있습니다. 

http://jigsaw.w3.org/css-validator/
 
위 사이트에서 URL 또는 파일업로드를 통해서 유효성 검사를 진행할 수 있게 됩니다.
이외에도 CSS에 대해 참고할 만한 사이트는 다음과 같습니다.

http://w3schools.com/css/default.asp
http://w3schools.com/css3/default.asp