CSS 마진과 패딩의 이해

CSS 마진과 패딩의 이해

그림을 보면 연한파란색이 콘텐츠 그리고 안에 패딩이 얼마주어지고 다음은 선(border) 마지막으로 마진이 화면을 구성한다.

위에것을보면 가로 756px 세로84px 패딩5px 보더0 마진0 으로 볼수 있다. IE6에서는 계산이 달라서 의도한것보다 작게나올수 있다 이에대한 해결은 너비를 지정한요소에는 패딩을 지정하지않고 그대신 그요소의 부모엘리먼트나 자식엘리먼트에 패딩을 마진을 지정해주면 문제가 일어나지않는다.

마진겹침 현상

왼쪽은 마진을 위의 박스는 마진30px 아래박스에 20px을 준경우다 실제 왼쪽같이 나올걸 기대하지만 오른족과 같이 겹침 현상으로 더 아래박스의 20px은 무시되고 겹친다.

이런현상은 엘리먼트안에서도 일어난다. 위그림의 흰색은 내용이고 회색에 마진 20px 진회색에 30px을 준경우 인데 실제나오는 모습은 오른쪽과 같이 20px마진이 무시되고 30px 이 주어진다.