margin
border를 경계로 하는 바깥쪽 여백을 의미한다.
두 개 요소의 margin 속성이 겹쳐지면 둘 중 큰 값이 적용된다(여백 상쇄).
padding
border를 경계로 하는 안쪽 여백을 의미한다.
부모 div에 padding 속성이 적용된 상태에서 콘텐츠 영역 안에 있는 자식 요소에 position: absolute, top: 0을 준다면, padding까지 부모 div의 면적으로 인식하고 padding을 무시하게 된다. 결과적으로 자식 요소는 부모의 padding이고 뭐고 맨 위에 붙어버리게 되는 것이다. 부모 div의 padding을 무시하지 않는 한도 내에서 자식 요소를 맨 위로 붙이고 싶다면, 부모 div에 padding을 주는 대신, 자식 요소에 margin을 주는 것이 낫다.
참고
CSS margin,padding 속성 - ofcourse
개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin과 padding는 border 을 경계로 나뉩니다. 방향 방향
ofcourse.kr
margin - CSS: Cascading Style Sheets | MDN
margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-bottom, margin-left의 단축 속성입니다.
developer.mozilla.org
'post항해_배움일지 > Web' 카테고리의 다른 글
| Web_SSR과 CSR (0) | 2021.09.24 |
|---|---|
| Web_CSS 애니메이션 (0) | 2021.09.14 |
| Web_display: inline, block, inline-block (0) | 2021.09.12 |