padding, margin 에 대하여

HTML과 CSS를 배우면서 나는 잘 몰랐는데 padding과 margin의 차이에 대해서 꽤 많은 사람들이 햇깔려한다는 사실을 최근에 알게 되었다. 

 

"여백이면 여백이지 안쪽 여백은 뭐고 바깥 여백은 뭐냐!"

라며 화를 낼법도 하지만 어떻게 보면 굉장히 디테일한 이런 분류는 보다 멋진 웹 디자인을 구현해 낼 수 있도록 여지를 만들어줬기 때문에 고마워해야 할지도 모른다.

 

어쨌든 padding과 margin에 대해서 이해하려면 먼저 HTML의 Box Model에 대하여 이해해야하는데 MDN에 보면 잘 나와있다.(https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#What_is_the_CSS_box_model)

 

일단 HTML에서 Box의 안과 밖을 나누는 기준은 "Border"가 된다. 이를 기준으로 바깥 여백은 Margin, 안쪽 여백은 Padding이 되겠다. 그리고 Box 배경색은 "Border"까지 채워진다.

 

여백의 기준과 Box Model은 퍼블리싱 할 때 굉장히 중요하기 때문에 꼭 알아두자.