박스 모델

햇갈린다 정리 좀 하자.

JS code

<div id="container">
  <div id="inner">
    안쪽 box
  </div>
</div>

CSS code

* {
  box-sizing: border-box;
}
#container {
  width: 300px;
  padding: 15px;
  background-color: yellow;
  border: 10px solid red;
  margin: 10px;
}
#inner {
  width: 100%;
  height: 200px;
  border: 2px solid green;
  background-color: lightgreen;
  padding: 30px;
/*   margin: 30px; */
}

border box는 border, padding, content를 통틀어 적용한다고 생각