inline 요소

• 영역의 크기가 내부 컨텐츠 크기로 정해진다.
• width, height을 지정할 수 없다.
• margin, padding의 top/bottom을 지정할 수 없다. 양 옆(left, right)만 가능하다.
• 여러 요소를 추가하면 가로방향으로 배치가 된다.
• ex) <span>, <a>, <img>

Block 요소

• 영역의 크기를 width, height으로 지정할 수 있다.
• width를 지정하지 않으면 가로 전체를 차지한다.
• 여러 요소를 추가하면 세로방향으로 배치가 된다.
• ex) <div>, <h1>-<h6>, <p>, <form>, <header>, <footer>, <section>

inline-block 요소

• width, height, margin, padding 지정이 가능하다.
• 여러 요소를 추가하면 가로방향으로 배치가 된다.
• ex) <input>

---

display: non;

요소를 없애고, 레이아웃을 배제한다 => 요소를 없앴을 때 빈 공간도 남아있지 않고 다른 요소가 대신 채우게 된다.

.box2 {
	display: non;
 }

=> 개발자 도구를 보면, .box2의 코드는 남아 있지만 display:non 으로 인해 사라져 보인다.

visibility: hidden;

요소를 없애고, 레이아웃을 변경하지 않는다 => 요소를 없앴을 때 빈 공간이 남아있는다.