[CSS] margin, padding / 차이점

 

width = width + (padding*2) + (border*2) px

 

 

📌 padding vs margin

 

padding, border => width에 관여
margin => width에 관여 X (공간들끼리 서로 밀어내는 것)

margin: 0 auto; : 가운데 정렬

 

box-sizing: border-box; : border가 width에 영향 주지 않게 해준다.

 

 

• margin이 겹치면, 더 작은 margin이 상쇄된다.
• 자식 margin이 부모를 넘어가면 미적용된다. => 그러므로, 부모가 padding을 가지는 것 > 자식이 margin을 가지는 것
• 자식 margin과 부모 padding은 섞이지 않는다. +된다.
• <ul>, <p> 태그 등은 기본적으로 margin 값을 가지고 있다.

css에서 속성은 '시계 방향'으로 적용

4개일 때 : top right bottom left
2개일 때 : x축(top, bottom) y축(left, right)
1개일 때 : all

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 총정리