[CSS] Box Model(margin, border, padding, content)

CSS에서 가장 기초적인
Box Model에 대한 공부 기록이다.

개요

box model은 HTML의 요소를 둘러싼 박스의 구성을 말한다.

margin, border, padding, content로 구성되어 있다.

출처 : https://www.w3schools.com/css/css_boxmodel.asp

위와 같은 위치를 가진다.

margin

border의 바깥 여백이다. 주로 요소들 간의 공간을 지정할 때 사용한다.

margin은 top, bottom, left, right 각각 지정해 줄 수도 있지만,

한 번에 여러 값들을 지정할 수도 있다.

div {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 100px;
  margin-left: 100px;
}

위 코드는 각각 값을 지정해준 예시이다.

 

div {
  margin : 50px 100px 50px 100px;
}

위 코드는 한 번에 값을 지정해준 예시이다.

순서는 top, right, bottom, left로 top부터 시계 방향으로 생각하면 편하다.

 

위의 코드를 보면 상,하 margin 값과 좌, 우 margin 값이 같은 것을 볼 수 있다.

이런 상황일 때 코드를 간단하게 만들 수 있다.

div {
	margin : 50px 100px;
}

위처럼 상하, 좌우 각각을 한 번에 지정해 줄 수도 있다.

 

물론 margin 값이 모두 같은 경우는 하나의 값만 지정해 주면 된다.

auto

margin 값은 auto라는 값도 가지는데

auto 값을 사용하면, 해당 요소의 컨테이너를 기준으로 가로로 중앙에 배치시킬 수 있다.

inherit

margin이 가지는 inherit 값은

부모 요소의 margin 값을 상속받는 경우이다.

padding

padding은 border 내부 content의 여백을 지정한다.

padding도 margin과 마찬가지로 값을 지정할 수 있다.

위에서 다뤘던 값을 지정하는 방법에서 모든 방법을 사용할 수 있다.

border

boder는 말 그대로 요소의 테두리를 말한다.

border 또한 위에서 다뤘던 것처럼 값을 지정할 수 있고,

색을 지정할 수도 border-radius를 이용해 border의 꼭짓점을 곡선으로 만들 수도 있다.

 

테두리의 스타일도 지정할 수 있는데

CSS Borders

위의 주소에서 여러 가지 스타일을 볼 수 있다.

Box Sizing

그렇다면 box의 크기는 어떻게 될까

box의 크기를 측정하는 방법은 크게 두 가지가 있다.

1. content-box
2. border-box

content box는 크기를 지정할 때 padding과 border의 크기를 고려하지 않는다.

때문에 padding과 border의 값을 지정하면 예상과는 다른 결과를 볼 수도 있다.

 

따라서 border box라는 측정 방법이 있다.

border box는 크기를 지정할 때 padding과 border도 포함한 크기를 지정한다.

따라서 border와 padding의 값을 바꾸더라도 예상했던 결과를 볼 수 있다.

 

아래의 링크에서 좀 더 직관적으로 이 차이를 볼 수 있다.

box-sizing - CSS: Cascading Style Sheets | MDN

---

참고

box-sizing - CSS: Cascading Style Sheets | MDN

CSS Tutorial