HTML Block과 Inline

블록(Block)

인라인 요소를 포함할 수 있으며 일반적으로 한 줄을 차지한다.

• 전후 줄바꿈이 발생하여 다른 요소를 다른 줄로 밀어낸다.
• 한 줄(가로)을 100% 사용, 사용하지 못하는 공간은 margin이 된다.

주요 블록 요소

div　p　ul　ol　li　h1~h6 form header nav footer section article aside table th td 등

• 가운데 정렬: margin: auto

---

인라인(Inline)

자신이 필요한 부분만 차지한다.

• 줄바꿈 없이, 다른 요소를 밀어내지 않는다.
• width, height 속성을 지정할 수 없다.
• margin은 좌우로만 지정할 수 있다.
• 텍스트를 작업하는 요소로 적합하다.

주요 인라인 요소

span　a　em b strong 등

• 가운데 정렬: 부모 요소에 text-align: center

---

인라인 블록(Inline-Block)

블록 요소처럼 속성값(크기, 여백 등)을 모두 지정할 수 있으며, 인라인 요소처럼 줄바꿈 없이 한 줄에 여러 요소를 배치할 수 있다.

주요 인라인 블록 요소

img input button

• 가운데 정렬: 부모 요소에 text-align: center