Css margin과 padding의 차이

margin요소의 바깥 여백,

padding은 요소의 안쪽 여백을 지정해줄수 있습니다

 

 

margin과 padding은 개별요소 들을 설정해줄수도 있고

축약형으로도 사용할 수 있습니다.

아래에 사용예시와 방향에 대한 정보가 같이 있습니다.

margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px

padding-top: 10px
padding-right: 10pxm
padding-bottom: 10px
padding-left: 10px


// 상 우 하 좌 (시계방향으로 인식하면 편함)
margin: 10px 9px 8px 7px
padding: 10px 9px 8px 7px

// 상,하 좌,우 
margin: 10px 9px
padding: 10px 9px

// 상 좌,우 하
margin: 10px 9px 8px
padding: 10px 9px 8px

 

margin은 박스의 크기에 상관없지만 padding을 설정하면 박스의 크기가 커질수 있습니다.

이때는 box-sizing을 border-box로 설정하면 설정한 width를 기준으로 border의 width, padding이 안쪽으로 커지고 전체적인 크기는 커지지 않습니다.

자세한 사항은 아래의 글을 참고해주시면 됩니다.

2022.03.01 - [markup/css] - box-sizing 속성

box-sizing 속성

 

margin은 특이한 점이 서로 상쇄됩니다.

아래의 예제에서 저는 위아래 box에 각각 margin-bottom, margin-top 을 10px씩 주었지만 두 박스간의 간격은 10px 입니다.

이를 margin collapse라 지칭합니다.

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing