Box의 종류는 여러가지가 있는 데, 그것은 display 속성이 알려준다.

  1. block / 2. inline / 3. inline-block / 4. flex block레벨 요소 :
<div>, <h1>~<h6>, <p>, <form>, <header>, <footer>, <section>

inline레벨 요소 :

<span>, <a>, <img>

박스 #1-2 : inline width, height, padding-top, padding-bottom, margin-top, margin-bottm은 인라인 요소에게 사용불가하다. 이런 값들은 오로지 ‘영역’을 차지할 수 있는 블록 요소에게 사용할 수 있다.

박스 #1-3 : inline-block width, height, padding-top, padding-bottom, margin-top, margin-bottm 을 모두 사용가능 하며 옆으로 흐른다.

box-sizing을 border-box로 바꾸자.

* {
    box-sizing: border-box;
}