block 요소
- 블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 요소다.
- 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지한다.
- 줄바꿈이 일어난다.
- 페이지의 구조적 요소를 나타낼 때 사용한다.
- 블록 요소는 인라인 요소 안에 중첩 될 수 없지만 a태그는 블록 요소 중첩이 가능하다.(특이 케이스)
inline 요소
- 인라인 요소는 항상 블록 레벨 요소에 포함된다.
- 콘텐츠에 따라 할당된 공간만 차지한다.
- width, height 크기 지정을 할 수 없다.
- padding, border, margin(left, right) 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다.
- 줄바꿈이 일어나지 않는다.
inline-block 요소
- 기본적으로 인라인 요소 속성을 따르면서 width, height 크기를 지정 할 수 있다.
- 인라인 요소에서는 margin 상하 속성을 사용할 수 없었지만 인라인-블록 요소는 사용 가능하다.
- ex) button, input, select