CSS에서 Margin과 Padding, Border 이해하기

전문적인 디자인은 아니지만, CSS를 이용해서 HTML을 코딩하면 항상 접하게 되는 항목이 margin, padding, border 이다.

특히 정확한 픽셀을 계산하기 위해서는 실제 width에 maring과 padding, border값이 어떻게 적용되는지를 파악해야만 한다.

일단 W3C를 참고해보면 CSS는 아래와 같은 구조를 가지고 있다.

이를 기반으로 width와 height를 계산하는 방식은 다음과 같다.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

자세한 설명은 아래을 참고하면 된다. 홈주소창을 만들때 아래이 방법이 많은 도움을 되었다.

그리고 HTML 표준모드가 아닌 호환모드가 있다. 즉 HTML 헤더에 DOCTYPE이 제대로 정의되지 않는 형태로 이런 경우에는 위의 공식이 적용되지 않는다. 그래서 호환모드에서는 계산 방법을 달리해야 한다. 홈주소창에서는 2가지 모드에 대해서 별도의 계산식을 사용해서 처리를 함으로써 크로스 브라우저 및 HTML 모드를 지원했다.

참고 URL : http://www.w3schools.com/css/css_boxmodel.asp