[css] 패딩과 마진의 차이

웹퍼블리싱에서 패딩(padding)과 마진(margin)은 필수 요소이며 가장 많이 사용 됩니다.

따라서 비슷하지만 다른 패딩과 마진의 대한 이해가 꼭 필요 합니다.

예를 들어 다음과 같이 css 를 적용했다고 가정 합니다.

padding:20px;

margin:20px;

border:1px solid #fff;

display:inline-block;

width:200px;

height:200px;

 

html에는 다음과 같이 적용됩니다.

패딩(padding)은 div 요소 안쪽에 공간을 만들며, 마진(margin)은 요소 밖에 공간을 만듭니다.

따라서 패딩을 사용한 경우 div의 가로 세로 크기 200px 보다 영역이 커지며,

마진을 사용한 경우에는 div의 가로 세로 크기는 200px 그대로가 되는것 입니다.

또한 마진의 경우 아래와 같이 요소끼리 겹치는 현상이 발생하기도 하지만 패딩의 경우 요소 안쪽에 공간이 생김으로 겹치는 일이 전혀 없습니다.

copyright (c) 2017 워크식스