CSS의 Box Model, Margin과 Padding의 차이

HTML에서 작성한 각종 태그들은 웹페이지 렌더링 단계에서 Box Model형태를 가지게 된다.

이는 웹브라우저의 렌더링 과정중 레이아웃 단계에서 만들어진다. (※ 웹브라우저 렌더링 과정, 원리)

 

Box Model의 구조를 알아보고 HTML항목들이 일정 공간을 차지하도록 하는 margin과 padding의 차이점을 알아보자.

 

1. Box Model

HTML의 요소들은 웹페이지에 렌더링될때 모두 박스모양으로 구성된다. 이를 박스 모델이라고 부르며 content, padding, border, margin 4가지 요소로 구성되어있다.

box model의 구성

• content (내용) : 가장 안쪽에 들어있는 항목(이미지에서 221x20 부분)으로 텍스트나 이미지 등 화면에 표시되는 내용이 들어있는 공간이다. 이는 height, width같은 내용물의 크기를 결정하는 CSS에 의해 정해지고 기본적으로는 텍스트 길이, 폰트, 이미지 크기 등 내용물에 따라 자동조절된다.
• border (테두리) : 항목의 테두리를 의미한다. 
• padding (패딩) : 항목의 내부 공간 확장 이라고 이해하면 된다. CSS속성이나 버튼기능 등은 테두리인 border를 기반으로 안쪽공간에서 작동하는데 padding은 이러한 안쪽공간을 넓혀주는 역할을 한다.
• margin(마진) : 항목의 외부 여백 확보 라고 이해하면 된다. a태그의 버튼기능, css의 background등의 속성이 적용되지 않는, 다른항목과의 여유공간을 두고 간격을 벌리기 위한 영역이다.

※ position속성은 box model에 포함되지는 않는다. 그러나 해당 항목의 position속성이 static이 아닌 다른 속성으로 지정되어 있는경우 일부 브라우저는 개발자도구에 position 속성을 표시해준다.

(position 속성이 static(기본값)일때는 주변 요소들에 의해서 위치가 정해지므로 position의 오프셋 값을 알 필요가 없지만 relative나 fixed같은 속성이 붙으면 top, left 등의 오프셋으로 위치를 조정하게 된다. 이때 좀더 정확한 요소의 위치 파악을 위하여 position속성을 표시해준다.)

 

2. margin과 padding의 차이

개발하는 웹페이지를 열어두고 margin값과 padding값을 넣어보면 똑같이 여유공간을 두는것으로 보여 같은 기능을 한다고 생각할 수 있다. 그러나 둘은 css속성을 받거나 기능을 수행하는데 있어 매우 다르게 동작하므로 정확하게 알고있는것이 좋다.

 

예를들어 아래의 메뉴바를 보면

 

메뉴 항목과 검색 항목사이의 간격을 만들때는 padding으로 넣든, margin으로 넣든 생김새에 다른점은 없다. 

 

그러나 padding값과 margin값을 필요에따라 다르게 주면 위와같이 각자의 공간을 차지하게 된다.

 

이때 가장 큰 기능적 차이점은 두 항목이 a태그 혹은 Next.js의 Link태그 등을 사용할 경우 버튼의 기능이 padding영역에서도 동작한다는 것이다.

즉 마우스를 padding영역에 놓고 클릭해도 content를 클릭하는 것과 동일하게 동작한다. (내부 공간 확장)

 

margin은 두 항목사이의 여유 공간을 두는 역할을 하고 있다.

margin 영역은 클릭을 해도 아무런 동작을 하지 않는다. (외부 여백 확보)

 

2-1. margin (외부 여백 확보)

• 요소의 테두리(border) 바깥쪽의 공간으로 간격 조정을 위한 공간이다. (외부 여백)
• 실제 요소의 크기에 영향을 주지 않는다.
• margin 공간은 기본적으로 투명하며 배경색, 이미지등이 적용되지 않는다.

2-2. padding (내부 공간 확장)

• 내용(content)의 연장선처럼 동작한다.
• 요소의 테두리(border) 안쪽의 공간으로 내부 공간을 늘리는데 사용된다.
• 실제 요소의 크기에 영향을 준다. padding영역도 요소의 크기로 취급된다.
• padding 공간은 내부 공간이므로 배경색, 배경이미지 등이 적용된다.