[css] Box model 박스모델의 구조

#Box Model

• HTML이 요소를 구성하는 방식
• 제일 바깥쪽부터 margin > border > content 순으로 구성된다.
• content-box와, border-box가 있다.

 

---

#box Sizing

 

content-box (기본)

 width + padding + border로 크기를 결정

border-box

 width 만으로 크기를 결정

#content-box{
  box-sizing:content-box; /* 기본값 */
  background-color: red;
  color: white;
  border: 15px solid black;
  width:350px;
}
#border-box{
  box-sizing: border-box;
  background-color: darkslateblue;
  color: white;
  border: 15px solid gray;
  width:350px;
}

---

둘 다 width를 350으로 설정해도
content-box는 width (350) + border(15*2) = 380이 전체 크기가 되고,
border-box는 전체크기 350에 맞춰서 border만큼 width를 줄여서 350이 전체크기가 된다.