[CSS]박스 모델

줄 바꿈이 되는 박스(block) - h1, p

옆으로 붙는 박스(inline) - span

display: inline-block
inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가짐

border - 테두리

margin - 바깥 여백 margin에는 음수 값을 지정할 수 있으며, 다른 엘리먼트와 간격을 줄일 수 있다.

padding - 내부 여백

---

#container {
  width: 300px;
  padding: 10px;
  background-color: yellow;
  border: 2px solid red;
}

#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
}

#container의 너비는 300px이 아니라, 324px

#inner의 100%는 300px이 아니라, 364px

항상 여백을 고려해야 한다.

box-sizing: border-box을 추가하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산

• content-box는 박스의 크기를 측정하는 기본값 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장