css magin, padding

여백주는 방법! magin / padding 차이점과 쓰임!! 

 

F12, 개발자 모드에서 볼 수 있는 margin 과 padding 값

 

 

 

 

 

 

margin : 오브젝트 바깥 여백 (오브젝트를 이동하거나, 빈 간격을 줄떄 사용) / 음수사용가능

사용법 (시계방향으로 값주기)

- margin: 위, 오른쪽, 아래, 왼쪽 / 4개지정

- margin: 위, 좌우, 아래 / 3개 지정

- margin: 위 아래 좌우 / 2개 지정

- margin: 모두 (사용자제할것!)

- margin:0 auto 가로가 있는 블럭 가운데 정렬할 때 

 

* margin collapsing 마진병합 :

부모+자식이 수직방향으로 인접할 때

부모 or 자식 위,아래가 margin-top이 가장 바깥 조상에 적용됨.

형제요소가 수직 방향 인접일 경우 마진병합 발생! (뭔소린지)

 

즉 block 요소끼리만 발생

상하단으로만 발생

 

 

padding : 오브젝트 내부여백 (내용을 안으로 밀어 넣거나, 크기를 늘려 간격줄떄  사용) / 음수사용불가

- 크기가 커질 수 있다.(적용시 크기가 지정되어있으면 안늘어나고, 크기가 없으면 늘어남!)

 

 

증말 모르게따 🤷‍♀️