Box의 종류는 여러가지가 있는 데, 그것은 display 속성이 알려준다.
- 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;
}