[CSS] margin(마진) , padding(패딩), margin:auto[가운데정렬, 수직정렬, 정가운데 위치]

📝margin

요소들 사이의 간격을 의미한다

 

📝padding

Border안에 내용물 사이의 간격을 의미한다

간단하게 말하면 Margin은 Border의 바깥영역을 의미, Padding은 Board의 안쪽영역을 의미한다

 

 

📝margin:auto

See the Pen Untitled by Lee (@mondaymonday2) on CodePen.

margin:auto는 자기 자신이 여백을 가지고 있는 경우 좌우의 간격을 동일하게 가져가 가운데 정렬이 됩니다

display:flex랑 같이 적용하는 경우 세로 정렬도 되어서 한 가운데 위치하게 됩니다