padding과 margin 에 대하여

1. padding은 해당 선택자의 몸 사이즈에 여유공간을 주는 것이며

margin은 해당 선택자의 몸 밖에 간격을 주는 것이다.

 

때문에 padding은 width에 포함이 되지만 margin은 값이 포함되지 않는다.

% 계산시 ---- > ? 

 

특정 콘텐츠의 영역 잡아 줄 때는 padding을 사용하는 것이 좋고 (반응형에서 간편해짐)

margin은 영역 바깥쪽 간격등을 잡아 줄 때에 사용하는 것이 좋다

설명하려니 좀 이해가 어려울 수 있는데 예시를 보면

 이미지슬라이드가 있고 이미지위에 arrow가 absolute로 떠있는 상태인데 이미지 좌우 간격을 padding으로 잡아서 반응형 시에도 떠있는 arrow가 영역안에서 보여지도록 padding으로 짜줌으로서 반응형이 간편해진 것을 확인할 수 있다

 

그와 반대로 간격을 띄워줄 뿐 컨텐츠의 몸집에 포함시키고 싶지 않다면 margin으로 떼어주는 것이 좋다.

 

추가로, 이미지의 높이를 %로 계산시 해당 이미지의 높이 / 부모의 가로 => 하면 padding-top: %를 구할 수 있다.

 

 

2. border를 기준으로 바깥쪽이 margin, 안쪽이 padding 

 

3. 음수 값이 margin은 적용이 되지만 padding은 되지 않는다.

또한 margin은 auto가 적용이 되지만 padding은 적용되지 않는다.

 

4. margin의 특징으로는 병합이라는 것이 있어서 겹칠때에 큰 숫자의 사이즈를 가지고 가는 특성을 가진다

margin 병합은 컨텐츠의 상하단에서 나타나는데,

인접하는 block 요소들이 상하에 margin이 겹칠 경우 큰 숫자를 적용시킨다.

 

또한 모와 자식 요소간의 마진도 겹침 현상이 일어난다.

 

여기 추가하기