CSS 에서의 margin 과 padding

오늘은 CSS에서 말하는 margin과 padding에 대해서 알아보도록하자. 굉장히 쉽고 또 이 부분은 box sizing과 연관되기 때문에 차근차근 익혀보도록하자.

먼저 margin과 padding에 대해서 얘기하기 전에 border에 대해서 얘기할 필요가 있다. 그리고 그림을 통해서 각각의 명칭을 알면 더욱 빠를 것이다. 모든 html요소는 박스안에 담긴다. 그리고 이 box안에 content를 담아서 화면에 렌더링을 시키는 것인데 box는 margin, border, padding, content를 담고 있다. 

Box 모델에 대한 설명 

보면 가장 바깥에 테두리가 margin 그리고 border, 안의 여백이 padding, 그리고 그 안에 content box가 위치한 것을 볼 수 있다. 그래서 다시 본론으로 돌아와서 얘기를 하자면 margin은 바깥쪽 여백 padding은 안쪽 여백을 말한다.

그렇다면 이 박스의 크기는 어디를 기준으로 정할지 생각할 수 있을 것이다. 그래서 CSS에서는 box-sizing을 위한 프로퍼티를 제공한다.

* {
box-sizing: content-box;
}

box-sizing 프로퍼티는 총 4개의 값을 가질 수 있다. content-box, border-box, initial, inherit인데, 각각 다음과 같다.

• content-box : 콘텐트 영역을 기준으로 크기를 정한다. (padding이 포함되지 않은 content box를 기준으로 한다.)
• border-box : 테두리를 기준으로 크기를 정한다. ( border가 기준이 된다. 즉 margin은 포함되지 않음)
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

그래서 다시한번 정리를 하자면, margin과 padding은 각각 border를 기준으로 바깥쪽 여백, 안쪽 여백을 말한다.